固定宽高的div垂直居中
假设外层div宽高均为600px;内层宽高均为200px;
代码如下:
<style>
.box {
width: 600px;
height: 600px;
background-color:#f00;
position: relative;
}
.box > div {
width: 200px;
height: 200px;
background-color: #ff0;
position: absolute;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -100px;
}
</style>
<div class="box"><div></div></div>
浏览器展示效果如下:
这种固定宽高的元素水平垂直居中相对比较简单,而且兼容性很好。