01.宽高固定的div在浏览器中水平/垂直居中
absolute将元素脱离文档流,通过“left: 50%; top: 50%;”和“margin-left: -width/2; margin-top: -height/2;”来实现;
.boxA{ position:absolute; top:50%; left:50%; margin:-50px 0 0 -130px; }
02.div绝对居中示例
在支持“display: table-cell;”的浏览器中,可以通过“vertical-align: middle;”实现垂直居中,利用“margin: 0 auto;”来实现水平居中;
在IE6/IE7中药通过两层div分别设置“left: 50%; top: 50%”和“left: -50%; top:
-50%;”来实现居中;
<div id="wrapper"> <div id="mid"> <div id="box"><p>Div绝对居中示例</p></div> </div> </div>
#wrapper{ display: table-cell; vertical-align: middle; *position:relative; } #mid{ *position: absolute; *top:50%; *left:50%; } #box{ margin:0 auto; *position:relative; *top:-50%; *left:-50%; }