第一記住一點：父級相對定位，子級絕對定位
下面演示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然后滑動鼠標滑輪，會發現不管怎么縮放都是垂直居中，至於兼容效果沒有去測試，歡迎各位反饋，或者提供更好的方法，也可以擴展相關的知識。