第一记住一点:父级相对定位,子级绝对定位
下面演示CSS样式:
.父级DIV{
margin:0px auto;
position:relative;
border:2px solid #ff0000;
width:1000px;
height:1000px;
}
.子级DIV{
border:2px solid #00ff21;
position:absolute;
margin-top:-300px;
width:100%;
height:600px;
top:50%;
left:0; }
下面是HTML代码
<body> <div class="父级DIV">
<div class="子级DIV"> </div> </div> </body>
要了解原理可以先将子级的margin去掉,查看效果,正常来说会显示如下效果(绿色为子级,红色为父级)
这就说明margin-top:-300px 返还了一半自身的高度,这样就可以达到居中的效果。
还有,有兴趣的可以尝试在页面按住Ctrl然后滑动鼠标滑轮,会发现不管怎么缩放都是垂直居中,至于兼容效果没有去测试,欢迎各位反馈,或者提供更好的方法,也可以扩展相关的知识。