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

① 單行文字

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

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

② 多行文字

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

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

HTML結(jié)構(gòu)如下：

css代碼如下：

實(shí)現(xiàn)的原理：

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

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

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

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

① 透明gif圖片+背景定位

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

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

css部分：


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

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

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

css部分：


需要說明的：

1.原版的代碼中有兩個hack，一個是針對文字大小的，另外一個是針對block屬性的；后經(jīng)過我測試推敲后證實(shí)這兩個hack都是多余的，而*display:block更是多余，因?yàn)镮E6,IE7根本就不認(rèn)識display:table-cell是誰！

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

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

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

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

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

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

css部分：

需要說明的：

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

2.此方法只需要兩層標(biāo)簽即可，可謂代碼超簡潔，但是只適用于多圖垂直居中對齊的情況。因?yàn)槠鋵R原理是相鄰的圖片居中對齊，如果只是一個圖片，vertical-align:middle就只有與空格對齊了。

④ 使用空白圖片實(shí)現(xiàn)垂直對齊

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

       

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

css部分：


原理簡述：

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

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

最新評論