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

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

translate,translate,translate,translate。。

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

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

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

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

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

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

巧用translate设置元素垂直水平居中的更多相关文章

  1. 【CSS】3种CSS方法设置元素垂直水平居中

    1. 宽高固定 设置要水平垂直居中的 div 的 position 为 absolute,left:50%; margin-left为负的这个元素宽度的一半,同理,top:50%;margin-top ...

  2. CSS之文本溢出隐藏,不定宽高元素垂直水平居中、禁止页面文本复制

    1.如何让不固定元素宽高的元素垂直水平居中 .center { position: absolute; top: 50%; left: 50%; background-color: #000; wid ...

  3. div+css实现未知宽高元素垂直水平居中

    div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...

  4. 纯CSS实现元素垂直水平居中-非固定宽度

    这里不讨论行内元素的居中!! 盒子垂直居中+水平居中的需求时经常遇到的,看到的较多实现逻辑是固定content-box的宽度,通过让margin-left和margin-top等于宽或高的负一半来实现 ...

  5. css中设置div垂直水平居中的方法

    设置要水平垂直居中的div的position为absolute,left:50%;margin-left为负的这个元素宽度的一半,同理,top:50%;margin-top为负的这个元素的高度的一半. ...

  6. div块元素垂直水平居中方法总结

    1.已知块级元素的宽和高,使用绝对定位+外边距设定水平垂直居中. 父元素position:relative,子元素position:absolute;top:50%;left:50%;margin-t ...

  7. 采用translate实现垂直水平居中

    今天分享一个利用css3新特性实现垂直水平居中的方法. 通过对元素进行绝对定位再配合transform中的translate实现. 代码如下: html <div id="conten ...

  8. js实现未知宽高的元素在指定元素中垂直水平居中

    js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中 ...

  9. CSS设置行内元素和块级元素的水平居中、垂直居中

    CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...

随机推荐

  1. SQLServer内置函数

    类型转换函数cast和convert --cast一般更容易使用,convert的优点是可以格式化日期和数值 select CAST('123.4' as int) --失败 select CONVE ...

  2. C++杂记

    变量就是一个地址,同进程内可以直接访问,要做好线程之间的同步就是了.——摘自CSDN 2015-06-18 16:58:10(注:注意变量的生命周期(作用域就可以不在意))

  3. Delphi的属性Property

    参考:http://www.cnblogs.com/edisonfeng/archive/2012/05/22/2513727.html 一.基本属性 TOnUserInfoShow = proced ...

  4. AJax中post与get请求注意事项

    在使用ajax提交表单时,一定要区分提交按钮的形式和数据表头的设置,实例如下: GET请求: HTML代码: <!doctype html> <html lang="en& ...

  5. [LeetCode] Maximal Rectangle

    Given a 2D binary matrix filled with 0's and 1's, find the largest rectangle containing all ones and ...

  6. Creating a Table View Programmatically

    https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/TableView_iPhone/Cre ...

  7. Java Hour 66 Spring 相关

    这章简单的来了解下Spring 和 Hibernate 是如何勾搭在一起的. <bean id="sessionFactory" class="org.spring ...

  8. angularjs 权威指南 版本 1.2.6

    1 $rootScope  run  : run 方法初始化全局的数据 ,只对全局作用域起作用 如$rootScope <script src="http://apps.bdimg.c ...

  9. Macbook Pro安装win7

    1.进入OS X系统,在实用工具中打开Boot Camp助理 2.用磁盘工具对磁盘进行分区,将需要安装win7的分区格式化成FAT格式 3.用Boot Camp对磁盘进行分割,然后插入win7的安装光 ...

  10. [Outlook]设置邮件自动接收时间

    [Outlook]设置邮件自动接收时间   找了好久,一直都没设置正常,导致老是收到邮件有延迟,今天头脑清晰,搜了一下,然后自己竟然给找到了,记下来当笔记,好记性不如烂笔头,呵呵   搜索百度&quo ...