码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-07-15 18:21:20      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:

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

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

translate,translate,translatetranslate。。

简单的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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!