由于IE与Firefox对CSS的解释不同，往往让我们在对一个图片处于一个div内垂直居中的问题伤透脑筋。上一篇讲述到用top:50%的方法，现在再展开补充说明一下。

首先我们定义一个放置图片的容器

.box{width:600px; height:300px; display:table; border:1px solid #000; background-color:#CCCCCC;}

为了更清楚看到效果，我定义了这个box的边框和背景色。

然后我们在这个容器内再多放置一个

.imgbox {display:table-cell; vertical-align:middle; text-align:center;}

由于IE不支持CSS2中的display:table和display:table-cell，而对于能解释这两个属性的浏览器来说，做到垂直局中到这里就已经足够了。因此我们要针对IE再下点功夫。对htm我们可以这样写：

<div class=”box”>
　<div class=”imgbox”><p><img src=”图片的位置” /></p></div>
</div>

然后针对IE我们补充hack的内容：

.box {*position:relative;}
.imgbox {*width:100%;*position:absolute; *top:50%; *left:0;}
　.imgbox p {*position: relative; *top:-50%; *margin:0; *padding:0;}
　.imgbox img{ *margin-top:4px;}

对IE来说，用了绝对定位和相对定位，通过两次50%的偏移找到了图片所在div的中心，因此完整的CSS应该为：

.box { width:600px; height:300px; display:table; border:1px solid #000; background-color:#CCCCCC; *position:relative;} /*这个层的长宽可以自定义*/
.imgbox { display:table-cell; vertical-align:middle; text-align:center; *width:100%; *position:absolute;  *top:50%; *left:0;}
　.imgbox p {*position: relative; *top:-50%; *margin:0; *padding:0;}
　.imgbox img{ *margin-top:4px;}

大功告成！