今天分享一个利用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%）就刚好居中了。
原文：http://www.cnblogs.com/Hx2JS/p/4632141.html