Zap's Special Techniques: 深入淺出 CSS block 垂直置中

在進行網頁排版時，常常會遇到需要 block 垂直置中排放的需求。

網路上也不乏解決方法可供參考，但鮮少解釋其設計原理。

在這篇文章中，將會以 Facebook 如何處理垂直置中排版，深入淺出的進行說明。

inline 與 inline-block

在解釋垂直置中排版之前，要先對 CSS 的 inline 與 inline-block 元素有基本的認識。

因為與本主題無關，請參閱 CSS 屬性 display 的值 inline block inline-block none。

圖片是最常見的 inline-block

我們知道，當在網頁中放置一張圖片，並在其後面添加幾個文字。會呈現如下圖的樣貌。

在CSS預設的樣式中，文字會對齊 inline-block 元素的底部，下圖將解釋得更清楚。

我們可以將這些網頁上的文字，先視為一個 inline 元素。
可以發現 inline 元素與 inline-block 元素的排列是以底部為基準，原因如下圖。

vertical-align 設定垂直置中

CSS 的 vertical-align 可以調整自己在該元素中垂直的相對位置，且只作用於 inline、inline-block、table-cell 元素上。vertical-align 預設為 baseline，也可以說是 bottom。換句話說，元素的垂直位置會靠底部對齊。詳細可參考 vertical-align。

因此，藉由設定 vertical-align 樣式，就可以達到初步的垂直置中，如下圖。

兩行文字馬上破功

文字若出現2行以上時，便會出現破圖的情況。原因是 inline 內部不是一個 block。
所以如果出現段落或換行，文字便會被推擠到下一行顯示，如下圖。

將文字包覆在 inline-block 中

為了讓多行內容也能自動垂直置中顯示，我們將文字包覆到 inline-block 元素中(橘色)。如此一來，他們會被視作在同一個 block 中，不會被推擠出去，如下圖。

inline-block 中，相對的 vertical-align

我們知道 vertical-align 是相對的，它會影響到該元素在垂直的相對位置，可以從下面兩張圖中了解他們相對的差異。

用兩個 inline-block 產生垂直置中

了解 vertical-align 的相對關係後，此時同時給予2個 inline-block 的樣式
vertical-align : middle，便能輕易產生一個相對關係下的垂直置中排列，如下圖。

產生最終結果

到目前為止，您已知道垂直置中的原理與設計模式了。
承接上圖，橘色的元素才是我們需要的垂直置中元素，藍色的部分只是輔助。
因此需另做微調，如下圖。

偽元素的妙用

如果每次為了製作一個垂直置中的排版，就要增加一個沒有意義的藍色 inline-block ，再用CSS設法將其隱藏，實在有違 HTML5 精簡的精神。

我們可以利用 CSS 中的 :before 偽元素來取代藍色 inline-block 的位置，讓整個 HTML 語法撰寫起來更加優雅。這也是目前 Facebook 處理垂直置中排版的方法。

整個切版圖如下：