css中固定宽高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>
浏览器展示效果如下：
这种固定宽高的元素水平垂直居中相对比较简单，而且兼容性很好。
