固定宽高的div垂直居中

固定宽高的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>

浏览器展示效果如下：

这种固定宽高的元素水平垂直居中相对比较简单，而且兼容性很好。

敬请期待下期文章——不固定宽高div垂直居中的解决办法