未知高度多行文字垂直居中

莜霓網路工作室

近日，微博上有朋友比較糾結未知高度的文字垂直居中問題。這個和「未知高度垂直居中」有些類似，但是有一些細節需要注意。

這裡有之前寫的乙個未知寬高對話方塊的垂直居中（拖動改變大小看是不是依然居中？），只不過對話方塊是相對於 viewport（視口）居中的，這裡的文字需要的是相對於容器垂直居中。

拿到這樣的需求時，先不要想著如何相容 ie6/7。先想想文字垂直居中靠什麼屬性？vertical-align: middle 對吧，好的，自然也就聯絡到了可愛的 inline-block。

主要的**如下：

多行文字未知高度垂直居中-by 一絲多行文字未知高度垂直居中-by 一絲多行文字未知高度垂直居中-by 一絲

.box:before

.text

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》。

以上一絲