CSS

用translate 讓區塊垂直置中

之前在幫客戶做多國語系的網站時,很多區塊因為翻譯的關係,導致字串長度差異不小,加上樣式的關係我讓該區塊用absolute的方式定位,這時候就必須讓其區塊要「置中」的效果,如果使用 top、bottom、等方式,會因為語系的關係導致設定值不同,這樣設定下來還是挺麻煩的,如果使用 translate 來處理,會自動計算每個區塊的高度達成垂直置中的目的,下面讓我們來看一下語法吧!

 

 

.selector{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

這邊是利用 position: absolute 先定位整個區塊,再用 translate(-50%, -50%) 自動計算,是不是很方便呢!

留言
回到頂端