今天分享一个利用css3新特性实现垂直水平居中的方法。
通过对元素进行绝对定位再配合transform中的translate实现。
代码如下：
html
<div id="content">
<div class="a">
<img src="...jpg" />
</div>
</div>
css
#content{position:relative;height:300px;width:300px;}
.a{position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);}
原理是先通过absolute设置top，left值将元素左上角起始点定位在容器中间，再通过translate向上和向右移动元素，移动50%（这里的50%是指移动元素宽高的50%）就刚好居中了。