采用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%)就刚好居中了。