css水平垂直居中（绝对定位居中） - Coder_Hickey

css水平垂直居中（绝对定位居中）

使用绝对定位有个限制就是父集必须设置一个固定的高度。

首先HTML

1 <div id="box">
2     <div class="child"></div>
3 </div>    

CSS

 1 #box {
 2     position: relative;
 3     height: 500px;
 4     background: red;
 5 }
 6 .child {
 7     width: 100px;
 8     height: 100px;
 9     background: blue;
10     margin: auto;
11     position: absolute;
12     top: 0;
13     right: 0;
14     bottom: 0;
15     left: 0;
16 }

示例图：