用translate 讓區塊垂直置中

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

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

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