想必寫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>
标簽：
div{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;} 内部
<span>
标簽：
span{display:inline-block; font-size:0.1em; vertical-align:middle;} 下面這張是執行個體示範頁面的效果截圖：
有幾點簡要說明：
- 此例子用
em
em
px
- 外部
div
- 外部
div
1.14
- 内部标簽的
vertical-align:middle
div
1.5
- 系統原因，我沒能夠在IE8下測試。
實作的最終效果和JavaScript示範，您可以狠狠地點選這裡去看看。
二、大小不固定，圖檔的水準垂直居中
① 透明gif圖檔+背景定位的方法
這裡利用了
background-position:center
實作圖檔居中顯示。這是個很實用也是很聰明的辦法，對于維護控制成本都很不錯。微軟必應圖檔搜尋的圖檔排列就是使用的這種方法。
方法的原理很簡單，使用一個透明的gif圖檔做覆寫層，高寬拉伸至所需要的大小，然後給這個gif圖檔一個
background-position:center
聲明。而
background-image
建議寫在頁面上，因為實際項目中，這肯定是個動态的URL位址，css檔案似乎不支援動态URL位址。下面就是執行個體示範頁面的效果截圖。
核心HTML代碼為：
<img src="../image/pixel.gif" style="background-image:url(mm1.jpg);" /> 其中此img标簽已經設定了高寬和背景居中定位的屬性。具體實作可以可以狠狠地點選這裡進行參照。
② display:table-cell和文字大小控制居中
這個方法可以說就是本文綜述部分提到的淘寶團隊想出的圖檔垂直居中的方法。但是本文展示的這個方法的css代碼又不是淘寶工程師們的原版代碼，我對其做了一定的修改，把裡面沒有用可以剔除的hack都去掉了。
css代碼部分：
<img>
外部
<div>
标簽：
div {display:table-cell; width:1em; height:1em; font-size:144px; width:144px; height:144px; font-size:118px; border:1px solid #beceeb; text-align:center; vertical-align:middle;}/*這裡的大小是根據高寬上限128像素圖檔設定的*/ img标簽：
img{vertical-align:middle;} 需要說明的：
1.原版的代碼中有兩個hack，一個是針對文字大小的，另外一個是針對
block
屬性的；後經過我測試推敲後證明這兩個hack都是多餘的，而
*display:block
更是多餘，因為IE6,IE7根本就不認識
display:table-cell
是誰！
2.這個通過文字大小控制IE下圖檔垂直居中是個很不錯的方法，要比使用
position:relative
這類高消耗的css方法要好多了。但是這個方法不足之處在于：不支援
<img>
外标簽的浮動，是以當多圖檔顯示時需要再在外面嵌套一層标簽——資源消耗多了！
3.高度：文字大小=1.14，這個比例我一直記着，但是後來我将這個比例的概念淡化了，原因在于多次遇到其他比例實作效果的情況。例如上面，就是1:1實作的。
③ display:inline-block和文字大小控制居中
此方法的靈感來自于Google picasa相冊的圖檔顯示，代碼相當簡潔，是個成本很低，效果驚人的方法。适用于多圖顯示的情況。基本上用裸标簽就實作了想要達到的效果。一般而言，圖檔陣列排列顯示的時候，外面都有一個a标簽的，起到連結的作用。而本處的方法就隻要這一個
<a>
标簽就足以實作圖檔垂直且居中的顯示效果。其關鍵是将
<a>
标簽預設的
inline
屬性值設定為inline-block，這樣
<a>
标簽既支援寬度，又支援
vertical-align:middle
，配合
<img>
的
vertical-align:middle
就可以實作圖檔的水準垂直居中顯示了。
css代碼：
<a>
标簽：
a{display:inline-block; width:1.2em; font-size:128px; text-align:center; vertical-align:middle;} img标簽：
img{vertical-align:middle;}