巧用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

函数的动画可以有比绝对定位动画有更高的帧数。