网页高度垂直居中

清华大佬耗费三个月吐血整理的几百G的资源,免费分享!....>>>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
	*{
         margin: 0;padding: 0;
       }
	   body{
			background-color:#63F;
			position:relative;
			display:block;
			width:100%;
			height:100%;
	   }
	div{
		margin:auto;
		position:relative;
		border: 1px solid gray;
		top:50%;
	}
	  #D1{
	  background-color:#F00;
	  width:100px;
	  height:100px;
	  margin-top:-50px;
	  }
	#D2{
		background-color:#0F0;
		width:200px;
		height:200px;
		margin-top:-100px;
	}
	#D3{
		background-color:yellow;
		width:300px;
		height:300px;
		margin-top:-150px;
	}
	#D4{
		background-color:#0FF;
		width:400px;
		height:400px;
		position:fixed;
		margin-top:-200px;
		left:50%;
		margin-left:-200px;
		}
</style>
</head>
<div id='D4'>
<div id='D3'>
<div id='D2'>
<div id='D1'>
</div>
</div>
</div>
</div>
<body>
</body>
</html>