我们在写css样式的时候水平居中这样很容易就可以实现,但是遇到使用垂直居中就开始思考了,对于属性vertical-align只支持那些高版本的浏览器,IE6/IE7并不支持但是我们需要考虑兼容到这些可以使用以下属性:
样式:
[code]* { margin:0; padding:0; list-style:none; font-size:14px;}
html { height:100%;background:url(images/body_bg.png);}
body { height:100%; text-align:center;background:url(images/body.png) repeat-x center;}
.centerDiv { display:inline-block; zoom:1; *display:inline; vertical-align:middle; text-align:left; width:1086px; height:498px;}
.hiddenDiv { height:100%; overflow:hidden; display:inline-block; width:1px; overflow:hidden; margin-left:-1px; zoom:1; *display:inline; *margin-top:-1px; _margin-top:0; vertical-align:middle;}
.outside{
width:100%;
background:url(images/ico.png) no-repeat left top;
height:431px;
border:1px solid red;
}[/code]
html:
[code]<div class=”centerDiv”>
<div class=”outside”>
</div>
</div>
<div class=”hiddenDiv”></div>[/code]