巧用translate设置元素垂直水平居中

标签：

之前在做手机项目时，用到很多自定义弹窗，然后要求都垂直水平要居中，最开始的时候想用calc来计算，可是css3 的calc兼容性不是很好，于是后来就借助了js来计算，

今天偶然看到别人的一个方法，瞬间感觉自己做了很多无用功~~

translate，translate，translate，translate。。

简单的css代码就可以实现：

.align{width:300px;
       height:300px;
       border:5px solid #666;
       position:absolute;
       left:50%;
       top:50%;
       -webkit-transform:translate(-50%,-50%)  //这是关键
}

而且经过试验，translate 函数当中使用百分比是以该元素的内容区、补白(padding)、边框(border)为标准计算的，这就是说 ，不论我们加何种padding或border都不会影响结果。

同时，在动画方面，translate 来制作的动画比绝对定位的动画更加平滑。

原因在于使用绝对定位的动画效果会受制于利用像素(px)为单位进行位移，而使用 translate 函数的动画则可以不受像素的影响，以更小的单位进行位移。

另外，绝对定位的动画效果完全使用 CPU 进行计算，而使用 translate 函数的动画则是利用 GPU，因此在视觉上使用translate 函数的动画可以有比绝对定位动画有更高的帧数。

巧用translate设置元素垂直水平居中

标签：

原文地址：http://www.cnblogs.com/mopagunda/p/4648814.html