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

① 單行文字

可能很多人都知道如何讓單行文字垂直居中顯示，就是使用line-height，將line-height值與外部標簽盒子的高度值設置成一致就可以了。例如： 單行文字居中顯示測試，css樣式為：

height:3em; line-height:3em;……

② 多行文字

但是對于外框高度固定，文字大小個數不固定的多行文字呢？
文字可能一行顯示，也有可能多行顯示；文字可能是小號字體，也有可能是大號的。這時候如何讓其垂直居中顯示呢？看下面！ 這里的文字用來做多行文字垂直居中對齊的測試。
這是第二行文字，您還可以再添加一行文字做測試！
這是隱藏的第三行文字，注意到文字的變化沒，依舊垂直居中。

上面所展示的就是多行文字垂直居中的效果！

HTML結構如下：

復制代碼代碼如下:
<div class=”zxx_align_box_2″><span class=”zxx_align_word”>這里顯示多行文字。</span></div>

css代碼如下：

復制代碼代碼如下:
.zxx_align_box_2{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;}
.zxx_align_box_2 span.zxx_align_word{display:inline-block; font-size:0.1em; vertical-align:middle;}

實現的原理：

說白了，就是把文字當圖片處理。用一個span標簽將所有的文字封裝起來，設置文字與圖片相同的display屬性（inline-block屬性），然后用處理圖片垂直居中的方式處理文字的垂直居中即可。

有幾點簡要說明：1.此例子用em做單位，如果您對em單位了解不夠，把握不來的話，可以使用px做單位，值要換；2.外部div不能使用浮動；3.外部div高度和文字大小比例1.14為宜；4.內部標簽的vertical-align:middle可以省略，但是外部div高度和文字大小比例要修改，我自己試了一下，高度比字體1.5左右的樣子；5.系統原因，我沒能夠在IE8下測試。

對于一些細化的原理，將在圖片垂直居中處講一下。
二、大小不固定，圖片的垂直居中

① 透明gif圖片+背景定位

這里利用了background-position:center實現圖片居中顯示。這是個很實用也是很聰明的辦法，對于維護控制成本都很不錯。微軟必應圖片搜索的圖片排列就是使用的這種方法。 方法的原理很簡單，使用一個透明的gif圖片做覆蓋層，高寬拉伸至所需要的大小，然后給這個gif圖片一個background-position:center center的屬性。而background-image建議寫在頁面上，因為實際項目中，這肯定是個動態的URL地址，css文件似乎不支持動態URL地址。下面就是此方法的實例表現。