#vertically center

[ruoshin]

CSS垂直置中之二：absolute

第二種常使用到的置中法是在物件有 position: absolute 的情況。

1. 母元素

position: relative;

在要垂直置中的物件的母元素加上 relative，這是為了要讓物件本身依照母元素來定位，有使用 position: absolute 就要在外層設定 relative，否則物件本身會沒意外的飛出整個 layout。

2. 要垂直置中的物件本身

position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;

將四個方位都設定為 0 ，margin 也是四邊設為 auto 就可以對母元素垂直置中。因為都把四邊設為 0 了，這個物件本身會從最外邊開始定位，所以到這裡會出現變成填滿母元素的狀態。通常也有蠻多人用這招來填滿特定區塊。

3. 設定物件寬高

width: 100px; height: 100px;

要成功垂直置中，這個物件必須有寬高，再搭配 margin: auto 的特性，會平均分配並自動幫你算出從四邊開始到物件的邊距，如此一來這個物件就會置中了。

See the Pen Using position: absolute to align center by ruoshin (@oc0706) on CodePen.

[ruoshin]

CSS垂直置中之一：transform

垂直置中永遠是個課題，即使用了很多次還是會陷入茫然，讓我想起前陣子有個大大做了置中生產器：HOW TO CENTER IN CSS

還衝到文章分享平台的熱門文章第一名，真的太幽默了，可見有多少人被它所困。雖然現在已經有很多方便的語法可以快速達成，但還是有瀏覽器向下支援的問題，尤其是在台灣……額。

最近愛用的方法是用 position 加上 transform，算是個支援度不錯，又簡單、不用計算的方法，只要設定 top、left 為 50% 還有對應的 translate 就可以自動置中。

例如以下的 CSS

position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);

因為設定 top 數值時，它是以物件本身的最上緣開始算，因此無法達到置中效果，而這裡的原理是利用 translate(x,y) 的特性去把對應數值減回來。當 translate(x,y) 設定的數值是百分比時，它就會以物件自己的長寬去計算，像是一個高 100px 的物件若設定 translateY(50%) 就會是 50px，高 150px 的物件設定 translateY(50%) 就會是 75px ，所以用 translate(x,y) 的數值相減，就能修正物件的位置偏差了。 

See the Pen Using position and trasform to center by ruoshin (@oc0706) on CodePen.

藍色區塊為 top: 50%，粉紅色是已經置中完成、對齊中線的區塊。

可以看到左邊兩個區塊重疊的深色部分，跟右邊 transform 區塊的上邊距是一樣的，必須把藍色區塊往上移才能置中，而這往上移的數值就是 transform 所計算的數值。

解釋這個也太難！希望無意間看到這篇的人能理解我在說什麼哈哈哈。