網路上也不乏解決方法可供參考，但鮮少解釋其設計原理。
在這篇文章中，將會以 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 處理 垂直置中排版的方法。
整個切版圖如下：
參考資料
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
http://blog.xuite.net/vexed/tech/29221717-CSS+%E5%B1%AC%E6%80%A7+display+%E7%9A%84%E5%80%BC+inline+block+inline-block+none
http://www.w3schools.com/cssref/pr_class_display.asp
