采用translate实现垂直水平居中

今天分享一个利用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%）就刚好居中了。