<DocType html>
<html>
<head>
<title>任意长宽度高度垂直水平居中div</title>
<style>
.parentDiv{
width:500px;<!-- 长宽可以改变-->
height:500px;
margin:0 auto;
background:blue;
}
.childDiv{
width:200px;<!-- 长宽可以改变-->
height:200px;
position:relative;
top:50%;
left:50%;
}
.lastChildDiv {
width:100%;
height:100%;
position:relative;
right:50%;
background:red;
bottom:50%;
}
</style>
</head>
<div class="parentDiv"><!--父div-->
<div class="childDiv"><!-- 过渡div-->
<div class="lastChildDiv"></div><!-- 子div-->
</div>
</div>
</html>
原文：http://www.cnblogs.com/ai3xiaoyi/p/3932935.html