css 设置垂直居中

（1）通过display:absolute;设置

<div style="position:absolute;width:200px;height:200px;margin:auto;border:1px solid red;top:0px;bottom:0px;left:0px;right:0px;">
</div>

（2）通过css3属性设置

<!-- 方式2：通过css3来设置：display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center; -->
<div style="display: -webkit-box;-webkit-box-pack:center;-webkit-box-align:center;width:100px; height:100px;border:1px solid red;">
<p style="border:1px solid red;">test</p>
</div>

此时是p元素垂直，左右居中；

 

(3)放小元素；div 垂直居中；加上margin:0 auto；左右居中；

<!-- 方式3 通过设置display:table; --->
<div style="border:1px solid red;display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;border:1px solid red;margin:auto;">
　　<div style="border:1px solid red;width:100px;height:100px;margin:0 auto;">111</div>
</div>
</div>

（4）通过html5的transform属性设置

<!-- 方式4 通过tranform:translate(-50%,-50%); -->
<div style="position:relative;top:50%;left:50%;transform:translate(-50%,-50%);width:100px;height:100px;border:1px solid red;"></div>