div圖片垂直居中 如何使div中圖片垂直居中

（從已經死了一次又一次終於掛掉的百度空間人工搶救出來的，發表日期 2014-04-03）

 

『此方法在ie7下，若是.box的高度爲800等比較大的數值時，並不能起到垂直居中的做用。』

 

點評：關於圖片垂直居中的話題想必你們在論壇或者是百度搜索列表中看到了很多了吧，煩人的是沒有具體或者至關詳細的解決方法，但願本文所整理的知識點能夠幫助到你

div相對與table對於圖片的垂直居中支持的並很差,特別對於不一樣瀏覽器的兼容性來講,這裏咱們看下一個簡潔的css解決方法: 
在曾經的 淘寶UED 招聘 中有這樣一道題目： 

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

固然出題並非隨意，而是有其現實的緣由，垂直居中是 淘寶 工做中最常遇到的一個問題，頗有表明性。
題目的難點在於兩點： 
1.垂直居中； 
2.圖片是個置換元素，有些特殊的特性。 
至於如何解決，下面是一個權衡的相對結構乾淨，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="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" /> 
</div>