本文綜述

想必寫css的都知道如何讓單行文字在高度固定的容器內垂直居中，但是您知道或者想過讓行數不固定的文字在高度固定的容器內垂直居中呢？本文將會告訴你如何實現多行文字的垂直居中顯示。
關于圖片垂直居中顯示，想必很多寫css的人都研究過，或者說是搜尋過方法。淘寶團隊似乎提供了一種不錯的方法，用font-size解決IE下垂直居中的問題，是個好方法嗎？是的，方法是不錯，可是問題也很多：不支持img外標簽的浮動，致使多圖片排列時需添加額外標簽；需要記住一些比例參數，上手較難；原理艱深，兼容性不穩定等。但是在我看來，這個方法不足夠好！本文將提供兩種更為新穎的方法，代碼簡潔，原理簡單，上手容易，兼容性強，出錯率低的方法。inline-block裸標簽對齊法，以及透明圖片拉伸對齊法。
css是如此的精深，我相信后來人會有更加絕妙的方法。但是，本文提供的幾種實現圖片垂直居中方法，一定是目前最實用的幾種方法。

一、大小不固定，多行文字的垂直居中

① 單行文字
可能很多人都知道如何讓單行文字垂直居中顯示，就是使用line-height，將line-height值與外部標簽盒子的高度值設置成一致就可以了。例如如下css代碼：height:3em; line-height:3em; ……
顯示結果如下圖：

② 多行文字
如何實現父容器高度固定，文字可能一行，兩行或更多行的垂直居中對齊呢？
實現的關鍵是把文字當圖片處理。用一個span標簽將所有的文字封裝起來，設置文字與圖片相同的display屬性（inline-block屬性），然后用處理圖片垂直居中的方式處理文字的垂直居中即可。
核心css代碼如下，
外部div標簽：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表