近日，微網誌上有朋友比較糾結未知高度的文本垂直居中問題。這個和「未知高度圖檔垂直居中」有些類似，但是有一些細節需要注意。
這裡有之前寫的一個未知寬高對話框的垂直居中（拖動改變大小看是不是依然居中？），隻不過對話框是相對于 viewport（視口）居中的，這裡的文字需要的是相對于容器垂直居中。
拿到這樣的需求時，先不要想着如何相容 IE6/7。先想想文字垂直居中靠什麼屬性？vertical-align: middle 對吧，好的，自然也就聯系到了可愛的 inline-block。
主要的代碼如下：
<body>
<div class=”box”>
<p class=”text”>
多行文本未知高度垂直居中-by 一絲多行文本未知高度垂直居中-by 一絲多行文本未知高度垂直居中-by 一絲
</p>
</div>
.box:before{
content: ‘我是那個備胎元素’;
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
}
.text{
display: inline-block;
font-size:16px;
vertical-align: middle;
}
vertical-align的對齊是需要有參照物的，那麼box 容器通過 before 生成一個高度 100% 的「備胎」，他的高度和容器的高度是一緻的，相對于「備胎」垂直居中，在視覺上表現出來也就是相對于容器垂直居中了。讓我們一起來試試。
1.可以發現按照我們的思路，文字換行了，這是腫麼了？Demo：
2.别急，既然「備胎」占用了本來文字的位置，那用 margin 負值試試，Demo。
好像還是不行捏？淩亂鳥~
還記得《inline-block 前世今生》中我們說到的 inline-block 元素間會産生空隙，難道是這貨在搗亂？
3.還記得之前怎麼處理空隙的嗎？font-size:0 ！試試看
4.柳暗花明又一村，世界和諧了，那麼最後隻要隐藏掉 before 生成的内容即可，請看最終 Demo。
最後，記得把「content 」中的備胎去掉哦！相容IE8+，Webkit，Firefox，Opera。（不要問我IE6怎麼搞了，思路最重要）
看看高度改變時的動畫示範：
誠然，以上是一種非常 Hack 的解決方案。本質上還是應該由 Flex 來解決，在面對這樣的需求時候，思路很重要。關于CSS 3 對齊規範在這裡《CSS Box Alignment Module Level 3》。
轉自：http://www.iyunlu.com/view/css-xhtml/77.html