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

① 單行文字

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

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

② 多行文字

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

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

HTML結構如下：

css代碼如下：

實現的原理：

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

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

對于一些細化的原理，將在圖片垂直居中處講一下。

二、大小不固定，圖片的垂直居中

① 透明gif圖片+背景定位

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

HTML部分（僅示例一張圖片，其他重復，故略）：

css部分：


② display:table-cell和文字大小控制居中

據說這個方法是淘寶的工程師想到的，確實是不錯的方法！但是下面展示的卻不是原版，而是我的修改版，去掉了沒有必要的hack。

HTML部分（僅示例一張圖片，其他重復，故略）：

css部分：


需要說明的：

1.原版的代碼中有兩個hack，一個是針對文字大小的，另外一個是針對block屬性的；后經過我測試推敲后證實這兩個hack都是多余的，而*display:block更是多余，因為IE6,IE7根本就不認識display:table-cell是誰！

2.這個通過文字大小控制IE下圖片垂直居中是個很不錯的方法，要比使用position:relative這類高消耗的css方法要好多了。但是這個方法不足之處在于：不支持img外標簽的浮動，所以當多圖片顯示時需要再在外面嵌套一層標簽——資源消耗多了！

3.高度：文字大小=1.14，這個比例我一直記著，但是后來我將這個比例的概念淡化了，原因在于多次遇到其他比例實現效果的情況。例如上面，就是1:1實現的。

4.這個方法巧妙的應用了IE默認文字空間的概念，然而這個默認文字空間是看不見，摸不著的，較抽象，不好理解，使用者多記住用法，深層次原因不太理解，不易上手。但是，這里我要轉折一下，我想到了一種方法，將抽象默認文字空間的概念具體出來，實現了更加容易理解，更加方便使用，更加利于維護的新方法，這就是最后一種方法。

③ display:inline-block和文字大小控制居中

這是我自己想到的方法，代碼相當簡潔，是個成本很低，效果驚人的方法，適用于多圖顯示的情況。只需要一層必須要的a標簽就解決問題了！

HTML部分（僅示例兩張圖片，其他重復，故略）：

css部分：

需要說明的：

1.img外的標簽需是a標簽或span這類inline屬性的標簽，div標簽也可以，但是css代碼多些:display:inline; display:inline-block先變成inline屬性，再轉變成inline-block屬性，原因講起來又是一篇長長的文章，放著。

2.此方法只需要兩層標簽即可，可謂代碼超簡潔，但是只適用于多圖垂直居中對齊的情況。因為其對齊原理是相鄰的圖片居中對齊，如果只是一個圖片，vertical-align:middle就只有與空格對齊了。

④ 使用空白圖片實現垂直對齊

好吧，我知道說大話會被人笑的，但是我還是非常自信地推薦下面這種我想出來的圖片垂直居中對齊的方法。非常簡單，非常易懂，出錯率低，上手方便，兼容性上佳！

       

HTML部分（僅示例一張圖片，其他重復，故略）：

css部分：


原理簡述：

一句話，將要顯示的圖片與一張透明的高度100%，寬度1像素的透明圖片vertical-align:middle對齊。

其核心原理其實與第二種利用font-size大小實現IE下圖片垂直居中是一致的。將font-size設置得很大，目的是撐開IE下默認文字空間的高度，其性質類似于空格，然后通過vertical-align:middle屬性讓圖片與這個高高的空白空格空間垂直居中對齊；而這里將這個看不見的文字空間實例成一張透明的gif圖片，高度可以輕松設置為外部標簽的高度，然后通過vertical-align:middle對齊，就實現效果了，在各個瀏覽器下都是一樣的表現，不需要擔心什么兼容性的問題。而且代碼很簡單，很易懂，想出錯都難！

最新評論