Css實現圖片垂直上下左右置中顯示

在曾經的 淘寶UED 招聘 中有這樣一道題目：

“使用純CSS實現未知尺寸的圖片(但高寬都小於200px)在200px的正方形容器中水平和垂直置中。”

當然出題並不是隨意，而是有其現實的原因，垂直置中是 淘寶 工作中最常遇到的一個問題，很有代表性。

題目的痛點在於兩點：

垂直置中；

圖片是個置換元素，有些特殊的特性。
至於如何解決，下面是一個權衡的相對結構乾淨，CSS簡單的解決方案：

代碼如下

複製代碼

.box { /*非IE的主流瀏覽器識別的垂直置中的方法*/ display: table-cell; vertical-align:middle; /*設定水平置中*/ text-align:center; /* 針對IE的Hack */ *display: block; *font-size: 175px;/*約為高度的0.873，200*0.873 約為175*/ *font-family:Arial;/*防止非utf-8引起的hack失效問題，如gbk編碼*/ width:200px; height:200px; border: 1px solid #eee; } .box img { /*設定圖片垂直置中*/ vertical-align:middle; } <div class="box"> <img src="/promotion/taoscars_180x95_071112_sr.jpg" /> </div>

方法二：

這種方法是利用了一個空的span標籤作為垂直置中的鉤子
需要注意的是，如果div標籤內的span標籤和img標籤不在同一行，並且不是緊密寫在一起的話，那麼就需要在外層的div中添加font-size:0；
添加font-size:0主要是考慮部分瀏覽器會對換行和空格產生一個“字元”做處理

XHTML代碼結構：

代碼如下	複製代碼
<div class="test_box"> <span class="hook"></span> <a href="http://mb.111cn.net/" target="_blank"><img src="book.jpg" alt="" /></a></div>

CSS代碼樣式：.

代碼如下	複製代碼
test_box {width:200px;height:200px;overflow:hidden;text-align:center;font-size:0;border:1px solid #000000;} .test_box .hook {display:inline-block;width:0;height:100%;overflow:hidden;margin-left:-1px;font-size:0;line-height:0;vertical-align:middle;} .test_box img {vertical-align:middle;border:0 none;}

方法三，圖片垂直置中tabel_cell

在不同的編碼模式下，文字的行高計算是不一樣的，所以請記住選擇與頁面相對的編碼
這個方法是利用display:table-cell在支援該屬性的瀏覽器中，結合vertial-align:middle方法來實現圖片垂直置中；
在不支援display:table-cell的瀏覽器（IE）中利用文字結合行高的方法來實現垂直置中；
display:table-cell這個屬性會導致一些屬性失效，比如margin，所以使用這種方式讓圖片垂直置中時，涉及到多圖片並排時有可能需要將下面的XHTML結構複製到li結構中；

XHTML代碼結構：

代碼如下	複製代碼
<div class="test_box"> <img src="book.jpg" alt="" /></div>

CSS代碼樣式：

代碼如下	複製代碼
.test_box {display:table-cell;width:200px;height:200px;vertical-align:middle;text-align:center; *float:left;*font-family:simsun;*font-size:200px;*line-height:1; border:1px solid #000000;}.test_box img {vertical-align:middle;}