</div>
CSS代码
CSS Code复制内容到剪贴板
#box{
width:500px;height:400px;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
}
#box p{
width:500px;height:400px;
line-height:400px; /* 行高等于高度 */
}
/* 兼容标准浏览器 */
#box p:before{
content:"."; /* <a href="http://casinogreece.gr/">????????????</a> 具体的值与垂直居中无关，尽可能的节省字符 */
margin-left:-5px; font-size:10px; /* 修复居中的小BUG */
visibility:hidden; /*设置成隐藏元素*/
}
#box p img{
*margin-top:expression((400 – this.height )/2); /* CSS表达式用来兼容IE6/IE7 */
vertical-align:middle;
border:1px solid #ccc;
}
使用:beforr这个方法对于标准浏览器来说比较给力，也没发现有副作用，但是对于IE6/IE7，如果对性能要求较高的话CSS表达式的方法要慎用。
方法五：
该方法针对IE6/IE7，将图片外部容器的字体大小设置成高度的0.873倍就可以实现居中，标准浏览器还是使用上面的方法来实现兼容，并且结构也是比较优雅。
HTML代码
XML/HTML Code复制内容到剪贴板
<div id="box">
<img src="images/demo.jpg" alt="" />
</div>
CSS代码
CSS Code复制内容到剪贴板
#box{
width:500px;height:400px;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
/* 兼容标准浏览器 */
display: table-cell;
vertical-align:middle;
/* 兼容IE6/IE7 */
*display:block;
*font-size:349px; /* 字体大小约为容器高度的0.873倍 400*0.873 = 349 */
