Der's Blog

以下内容转自淘宝前端考题

解法一：
优点：代码简洁
缺点：用到了hacks，图片下如果有文字会有问题。

<style>
.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 red; }
.box img {  
/*设置图片垂直居中*/
vertical-align:middle; }
</style>
<div class=”box”> <img src=”http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg” /></div>

解法二：
优点：无hacks，图片下允许有文字
缺点：用到了IE expression语句，相对上述方法比较耗客户端资源。

<style>
.box {
text-align:center;
width:200px;
height:200px;
border:1px solid #ff0;
vertical-align: middle;
display: table-cell;
}
.box img{
margin-top:expression(100-this.height/2);
}
</style>
<div class=”box”> <img src=”http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg” /></div>

以上方法缺陷是box容器不能float或绝对定位，解决办法为在box外套一层再float或绝对定位即可。