本文綜述

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

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

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

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

內(nèi)部span標(biāo)簽：

下面這張是實(shí)例演示頁(yè)面的效果截圖：

行數(shù)不固定文字垂直居中對(duì)齊

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

實(shí)現(xiàn)的最終效果和JavaScript演示，您可以點(diǎn)擊這里去看看。

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

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

透明圖片和背景定位實(shí)現(xiàn)圖片水平垂直居中

核心HTML代碼為：

<img src="../image/pixel.gif" style="background-image:url(http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg);" />

其中此img標(biāo)簽已經(jīng)設(shè)置了高寬和背景居中定位的屬性。具體實(shí)現(xiàn)可以可以點(diǎn)擊這里進(jìn)行參照。

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

這個(gè)方法可以說(shuō)就是本文綜述部分提到的淘寶團(tuán)隊(duì)想出的圖片垂直居中的方法。但是本文展示的這個(gè)方法的css代碼又不是淘寶工程師們的原版代碼，我對(duì)其做了一定的修改，把里面沒(méi)有用可以剔除的hack都去掉了。

css代碼部分：
img外部div標(biāo)簽：

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;}/*這里的大小是根據(jù)高寬上限128像素圖片設(shè)置的*/

img標(biāo)簽：

需要說(shuō)明的：
1.原版的代碼中有兩個(gè)hack，一個(gè)是針對(duì)文字大小的，另外一個(gè)是針對(duì)block屬性的；后經(jīng)過(guò)我測(cè)試推敲后證實(shí)這兩個(gè)hack都是多余的，而*display:block更是多余，因?yàn)镮E6,IE7根本就不認(rèn)識(shí)display:table-cell是誰(shuí)！
2.這個(gè)通過(guò)文字大小控制IE下圖片垂直居中是個(gè)很不錯(cuò)的方法，要比使用position:relative這類(lèi)高消耗的css方法要好多了。但是這個(gè)方法不足之處在于：不支持img外標(biāo)簽的浮動(dòng)，所以當(dāng)多圖片顯示時(shí)需要再在外面嵌套一層標(biāo)簽——資源消耗多了！
3.高度：文字大小=1.14，這個(gè)比例我一直記著，但是后來(lái)我將這個(gè)比例的概念淡化了，原因在于多次遇到其他比例實(shí)現(xiàn)效果的情況。例如上面，就是1:1實(shí)現(xiàn)的。

這里附上效果截圖（取自IE6瀏覽器）：

table-cell和文字大小實(shí)現(xiàn)的圖片垂直居中顯示

圖片和文字比不上直接的效果顯示，所以建議您點(diǎn)擊這里。

③ display:inline-block和文字大小控制居中
此方法的靈感來(lái)自于Google picasa相冊(cè)的圖片顯示，代碼相當(dāng)簡(jiǎn)潔，是個(gè)成本很低，效果驚人的方法。適用于多圖顯示的情況?；旧嫌寐銟?biāo)簽就實(shí)現(xiàn)了想要達(dá)到的效果。一般而言，圖片陣列排列顯示的時(shí)候，外面都有一個(gè)a標(biāo)簽的，起到鏈接的作用。而本處的方法就只要這一個(gè)a標(biāo)簽就足以實(shí)現(xiàn)圖片垂直且居中的顯示效果。其關(guān)鍵是將a標(biāo)簽?zāi)J(rèn)的inline屬性設(shè)置為inline-block屬性，這樣a標(biāo)簽既支持寬度，又支持vertical-align:middle，配合img的vertical-align:middle就可以實(shí)現(xiàn)圖片的水平垂直居中顯示了。
css代碼：
a標(biāo)簽：

img標(biāo)簽：

就這么簡(jiǎn)單，就實(shí)現(xiàn)了圖片的垂直居中效果。下截圖為證：

最精簡(jiǎn)的實(shí)現(xiàn)圖片水平垂直居中顯示的方法

另外補(bǔ)充說(shuō)明的：img外的標(biāo)簽需是a標(biāo)簽或span這類(lèi)inline屬性的標(biāo)簽，div標(biāo)簽也可以，但是css代碼多些: display:inline-block;*display:inline; zoom:1; IE下要先變成inline屬性，再轉(zhuǎn)變成類(lèi)似于inline-block的屬性，原因講起來(lái)又是一篇長(zhǎng)長(zhǎng)的文章，放著。

建議您點(diǎn)擊這里直接查看源代碼

④ 透明圖片拉伸對(duì)齊實(shí)現(xiàn)垂直居中顯示
這個(gè)方法是我自認(rèn)為相當(dāng)不錯(cuò)的一個(gè)方法，說(shuō)實(shí)話，想到這個(gè)方法是自然而然的，經(jīng)過(guò)試驗(yàn)發(fā)現(xiàn)真的很管用。對(duì)比淘寶團(tuán)隊(duì)的方法，發(fā)現(xiàn)優(yōu)勢(shì)很多，基本上淘寶的table-cell+font-size方法會(huì)帶來(lái)的些問(wèn)題都避免了。
非常簡(jiǎn)單，非常易懂，出錯(cuò)率低，上手方便，兼容性上佳！

原理簡(jiǎn)述：
一句話，將要顯示的圖片與一張透明的高度100%，寬度1像素的透明圖片vertical-align:middle對(duì)齊。
其核心原理其實(shí)與利用font-size大小實(shí)現(xiàn)IE下圖片垂直居中是一致的。將font-size設(shè)置得很大，目的是撐開(kāi)IE下默認(rèn)文字空間的高度，其性質(zhì)類(lèi)似于空格，然后通過(guò)vertical-align:middle屬性讓圖片與這個(gè)高高的空白空格空間垂直居中對(duì)齊；而這里將這個(gè)看不見(jiàn)的文字空間實(shí)例成一張透明的gif圖片，高度可以輕松設(shè)置為外部標(biāo)簽的高度，寬度壓縮至最小，然后通過(guò)vertical-align:middle對(duì)齊，就實(shí)現(xiàn)效果了，由于影響布局的差不多就vertical-align:middle這一個(gè)屬性，所以出現(xiàn)兼容性問(wèn)題的可能性比table-cell的方法要低得多。
需要注意的：
1.img外容器寬度要大于要顯示的圖片的最大寬度+1像素；
2.img外容器的字體大小設(shè)為0px，也可以不設(shè)，但是兩個(gè)img標(biāo)簽要連著寫(xiě)，避免空格；

以下是核心的一些代碼：
HTML部分：

css部分：

li{height:128px; width:150px; padding:13px 0; float:left; margin-right:10px; border:1px solid #beceeb; text-align:center; font-size:0;} li .alpha_img{height:100%; width:1px; vertical-align:middle;} li .alpha_img{height:100%; width:0; vertical-align:middle;} li .show_img{vertical-align:middle;}

其實(shí)，只要有上面綠色部分的css代碼就足夠了。
簡(jiǎn)單的超乎想象。

要顯示的圖片后面跟了一個(gè)高度撐滿容器，只有1px寬，寬度為0即可，透明的圖片。這兩個(gè)圖片分別vertical-align:middle，就實(shí)現(xiàn)了要顯示的圖片與這個(gè)拉伸的透明圖片的居中對(duì)齊了，由于透明圖片是透明的，不可見(jiàn)的，寬度也只有1像素寬度也為0，所以看上去就是要顯示的圖片相對(duì)于容器垂直居中了。

另外，其實(shí)這里不一定是透明的圖片，使用任意的圖片都可以，所以您其實(shí)說(shuō)不定可以減少一次http請(qǐng)求，使用任意的圖片將其拉伸至高度為容器高，寬度1像素寬度0就可以了。

甚至，使用span標(biāo)簽，div標(biāo)簽也可以實(shí)現(xiàn)同樣的效果。只要將span標(biāo)簽或div標(biāo)簽轉(zhuǎn)換成inline-block屬性或類(lèi)似于inline-block屬性就可以了。
我個(gè)人更推薦使用行內(nèi)元素，例如span，i標(biāo)簽等，只要應(yīng)用類(lèi)似下面的CSS：

相比圖片而言，多了個(gè)display:inline-block; 但是會(huì)少一次鏈接請(qǐng)求。效果圖和上面的一樣的，完美的水平垂直居中。原理也與圖片一樣，相信很容易理解的。

最后，說(shuō)句實(shí)在話，我知道這應(yīng)該不算什么新穎的方法，在我之前想到這種方法的人肯定不在少數(shù)，但是留跡于網(wǎng)上的卻沒(méi)有，我是沒(méi)有發(fā)現(xiàn)過(guò)。我不清楚是這些大牛的公司要求技術(shù)保密，還是自身不愿分享研究成果。我相信不是這樣的，主要還是他們很忙碌，沒(méi)有時(shí)間寫(xiě)這些東西。像我這樣，”閑暇”的很，花十幾個(gè)小時(shí)寫(xiě)一篇文章的估計(jì)不多，呵呵。

補(bǔ)充于2009-11-03 15:32
正如我經(jīng)常掛在嘴邊的，css博大精深，你需要花費(fèi)精力去觀察它，研究它。這里，我再提供一種我剛剛試驗(yàn)出來(lái)的一種新方法，實(shí)現(xiàn)大小不固定的圖片水平垂直居中，綜合來(lái)講，比上面所有提供的方法還要優(yōu)秀，且沒(méi)有hack，兼容性上佳（支持IE6、IE7、Firefox、chrome、Safari瀏覽器-IE8未測(cè)（補(bǔ)充：我后來(lái)又測(cè)試了一下，結(jié)果在IE8瀏覽器和Opera瀏覽器下是不垂直居中的，所有此方法還是有待商榷的）。下為在IE7下的效果截圖：

此方法原理是，在IE下使用font-size使圖片垂直居中顯示，F(xiàn)irefox，chrome等現(xiàn)代瀏覽器使用line-height配合img本身的vertical-align屬性使垂直居中顯示，由于兩者不沖突，所以沒(méi)有hack就實(shí)現(xiàn)的效果。css代碼簡(jiǎn)潔明了，關(guān)鍵是HTML代碼非常清晰，一層外標(biāo)簽，里面就是img標(biāo)簽，我想很難再找出比這個(gè)方法更出色的讓圖片水平垂直居中的方法了。好吧，其實(shí)這個(gè)方法是有一點(diǎn)不完美的，就是opera瀏覽器下圖片無(wú)法垂直居中顯示，幸好國(guó)內(nèi)而言，使用opera瀏覽器的比例很低，所以綜合來(lái)講這個(gè)方法是個(gè)非常優(yōu)秀的圖片水平垂直居中的方法。

以下為css代碼部分：

可以看到，代碼非常簡(jiǎn)潔易懂，HTML部分代碼就不上了，您可以單擊下面的demo，里面有HTML代碼的展示以及效果的預(yù)覽。

最新評(píng)論