div內圖片和文字水平垂直居中

大小不固定的圖片、多行文字的水平垂直居中

本文綜述

想必寫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;}

下面這張是實例演示頁面的效果截圖：

行數不固定文字垂直居中對齊

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

實現的最終效果和JavaScript演示，您可以狠狠地點擊這里去看看。

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

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

透明圖片和背景定位實現圖片水平垂直居中

核心HTML代碼為：

<img src="../image/pixel.gif" style="background-image:url(http://image.zhangxinxu.com/image/study/s/s128/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實現的。

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

table-cell和文字大小實現的圖片垂直居中顯示

圖片和文字比不上直接的效果顯示，所以建議您狠狠地點擊這里。

③ 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;}

就這么簡單，就實現了圖片的垂直居中效果。下截圖為證：

最精簡的實現圖片水平垂直居中顯示的方法

另外補充說明的：img外的標簽需是a標簽或span這類inline屬性的標簽，div標簽也可以，但是css代碼多些: display:inline-block;*display:inline; zoom:1; IE下要先變成inline屬性，再轉變成類似于inline-block的屬性，原因講起來又是一篇長長的文章，放著。

建議您狠狠地點擊這里直接查看源代碼

④ 透明圖片拉伸對齊實現垂直居中顯示
這個方法是我自認為相當不錯的一個方法，說實話，想到這個方法是自然而然的，經過試驗發現真的很管用。對比淘寶團隊的方法，發現優勢很多，基本上淘寶的table-cell+font-size方法會帶來的些問題都避免了。
非常簡單，非常易懂，出錯率低，上手方便，兼容性上佳！

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

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

<li><img data-src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /><img src="../image/pixel.gif" />
</li>

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;}

其實，只要有上面綠色部分的css代碼就足夠了。
簡單的超乎想象。

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

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

甚至，使用span標簽，div標簽也可以實現同樣的效果。只要將span標簽或div標簽轉換成inline-block屬性或類似于inline-block屬性就可以了。
我個人更推薦使用行內元素，例如span，i標簽等，只要應用類似下面的CSS：

span{display:inline-block; height:100%; width:0; vertical-align:middle;}

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

再提供一下實例頁面的鏈接，狠狠地點擊這里，實例頁面的最后一種方法向您展示了這種新穎的圖片垂直居中的方法。

最后，說句實在話，我知道這應該不算什么新穎的方法，在我之前想到這種方法的人肯定不在少數，但是留跡于網上的卻沒有，我是沒有發現過。我不清楚是這些大牛的公司要求技術保密，還是自身不愿分享研究成果。我相信不是這樣的，主要還是他們很忙碌，沒有時間寫這些東西。像我這樣，”閑暇”的很，花十幾個小時寫一篇文章的估計不多，呵呵。

補充于2009-11-03 15:32
正如我經常掛在嘴邊的，css博大精深，你需要花費精力去觀察它，研究它。這里，我再提供一種我剛剛試驗出來的一種新方法，實現大小不固定的圖片水平垂直居中，綜合來講，比上面所有提供的方法還要優秀，且沒有hack，兼容性上佳（支持IE6、IE7、Firefox、chrome、Safari瀏覽器-IE8未測（補充：我后來又測試了一下，結果在IE8瀏覽器和Opera瀏覽器下是不垂直居中的，所有此方法還是有待商榷的）。下為在IE7下的效果截圖：
新方法實現圖片垂直居中
此方法原理是，在IE下使用font-size使圖片垂直居中顯示，Firefox，chrome等現代瀏覽器使用line-height配合img本身的vertical-align屬性使垂直居中顯示，由于兩者不沖突，所以沒有hack就實現的效果。css代碼簡潔明了，關鍵是HTML代碼非常清晰，一層外標簽，里面就是img標簽，我想很難再找出比這個方法更出色的讓圖片水平垂直居中的方法了。好吧，其實這個方法是有一點不完美的，就是opera瀏覽器下圖片無法垂直居中顯示，幸好國內而言，使用opera瀏覽器的比例很低，所以綜合來講這個方法是個非常優秀的圖片水平垂直居中的方法。

以下為css代碼部分：

.zxx_ul_image li{float:left; width:150px; height:150px; text-align:center; line-height:150px; font-size:125px;}
.zxx_ul_image li img{vertical-align:middle;}.zxx_ul_image li{float:left; width:150px; height:150px; text-align:center; line-height:150px; *font-size:125px;}
.zxx_ul_image li:after{content:' '; vertical-align:middle;}
.zxx_ul_image li img{vertical-align:middle;}