垂直水平居中是日常前端开发当中一个常见的需求,在支持 CSS3 属性的现代浏览器当中,有一个利用 CSS3 属性的垂直水平居中方法:
position absolute; :; :; :translate; :translate; :translate; :translate; }
例子传送门(请用现代浏览器打开)
从上面的例子看到,无论我们怎样调整窗口的大小,红色方块始终会在窗口垂直、水平居中。
原理
为了解释原理,我们创建两个元素:
divid"outer"> < => </> </>
先不加上  属性:
#outerposition relative; :; :; :; } { :; :; :; :; :; :; }
可以看到红色方块左、上方距离外层方块的距离都是250个像素,如果我们想实现垂直水平居中,就应该将红色方块的中心点移动到目前元素左上角的位置,也就是分别向上和向左移动一半方块边长的长度,50个像素。
#innerposition absolute; :; :; :; :; :; :translate; :translate; :translate; :translate; }
所以我们可以看到在  函数当中使用百分比是以该元素的内容区、补白()、边框()为标准计算的,为了说明这一点,我们在 innner 元素加上一些  和 :
#innerposition absolute; :; :; :; :; :; :; :; :translate; :translate; :translate; :translate; }
可以看到 inner 元素一样做到了垂直、水平居中。
translate 与绝对定位、相对定位
在表现上看,使用 CSS3  函数和绝对定位、相对定位属性加上 、 数值都可以使元素产生位移。实际上它们还是有不少的区别。
元素视图属性中的  和  属性。
我们分别用相对定位和  的方法来使元素产生位移:
#box1position relative; :; :; :; :; :; }
#box2width 50px; :; :; :translate; :translate; :translate; :translate; }
然后看看两者的  和  的数值:
vardocument"box1"); alert(box1.offsetLeft); alert(box1.offsetTop);
vardocument"box1"); alert(box2.offsetLeft); alert(box2.offsetTop);
可以看出使用  的例子的  和  的数值与没有产生位移的元素没有然后区别,无论位移多少这两个数值都是固定不变的。
而使用相对定位的例子  和  的数值则根据位移的长度发生了改变。
动画表现的区别
在 CSS3 属性还没很好地被浏览器支持的时候,我们常常会使用绝对定位(),然后结合 jQuery 改变元素的、 的数值来做位移的动画效果。
然而,两者在位移动画的表现上也有一定的区别。借用国外博主 Paul Irish 的两个例子:
对比两个例子来看,可以看出使用  来制作的动画比绝对定位的动画更加平滑。
原因在于使用绝对定位的动画效果会受制于利用像素(px)为单位进行位移,而使用  函数的动画则可以不受像素的影响,以更小的单位进行位移。
另外,绝对定位的动画效果完全使用 CPU 进行计算,而使用  函数的动画则是利用 GPU,因此在视觉上使用 函数的动画可以有比绝对定位动画有更高的帧数。
最后
CSS3 动画相关的属性出现以后,可以让我们更加轻松地制作复杂的动画,同时  和  这一类的属性可以回归它们原本的定位,为定位、布局服务,而将动画的重任交给 CSS3 的相关属性。

translate 与 相对、绝对定位的更多相关文章

  1. CSS面试总结

    文章首次发表:_时雨_CSDN 1. BFC:块级格式化上下文(重点关注) BFC基本概念:BFC是 CSS布局的一个概念,是一块独立的渲染区域(环境),里面的元素不会影响到外部的元素. BFC原理( ...

  2. 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

    Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中--实际上,实现垂直居中仅需要声明元素 ...

  3. 尽量使用translate而不是改变top/left进行动画(翻译)

    前言 本文翻译自 Why Moving Elements With Translate() Is Better Than Pos:abs Top/left,本文有改动,添加了一些作者自己的理解,不当之 ...

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

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

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

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

  6. 解决CSS垂直居中的几种方法(基于绝对定位,基于视口单位,Flexbox方法)

    在CSS中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用 text-align: center ;如果它是一个块级元素,就对它自身应用 margin: auto.然而如果要对 ...

  7. css 绝对定位实现水平垂直居中

    负margin实现水平垂直居中 width: 500px; height: 500px; position: absolute; left: 50%; top :50%; margin-left: - ...

  8. 小tip: margin:auto实现绝对定位元素的水平垂直居中

    转载自:http://www.zhangxinxu.com/wordpress/?p=3794 一.绝对定位元素的居中实现 如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了. 兼容 ...

  9. 【Web】CSS实现绝对定位元素水平垂直居中

    网页中常常需用让绝对定位元素水平垂直居中,下面介绍2种方法: 一 元素宽度未知 <!DOCTYPE html> <html lang="en"> <h ...

随机推荐

  1. object & over-write

    object & over-write

  2. 一文总结之MyBatis

    目录 MyBatis 目标 MyBatis演示 Configuration.xml 映射文件 初始化配置文件 Dao Spring与MyBatis集成 pom Spring配置文件 MyBatis配置 ...

  3. 设置快捷键 让word轻松实现无格式粘贴

    设置快捷键 让word轻松实现无格式粘贴使用word时,我们经常会遇到需要将网页上的内容复制到word进行编辑的情况,但是通常这样复制进来的内容都是带有格式的,编辑起来非常不便.虽然我们可以利用“记事 ...

  4. mysql的check约束问题

    mysql手册中写道:存储引擎会解析check子句,但是会把它忽略掉 The CHECK clause is parsed but ignored by all storage engines. 现在 ...

  5. MT【142】Bachet 问题,进位制

    问题: 满足下面两种限制条件下要想称出40以内的任何整数重量,最少要几个砝码: i)如果砝码只能在天平的某一边; ii)如果砝码可以放在天平的两边. 提示:对于 i)先证明如下事实: \[\textb ...

  6. 安装GourdScanV2的踩坑过程

    环境:ubuntu 16.04.1 1.安装dcoker sudo apt-get install docker.io 坑:sudo apt-get install docker 2.下载关于dock ...

  7. 【bzoj3570】 Cqoi2014—通配符匹配

    http://www.lydsy.com/JudgeOnline/problem.php?id=3507 (题目链接) 题意 给出一个主串,里面有些通配符,'*'可以代替任意字符串或者消失,'?'可以 ...

  8. VS2010 重命名文件:源文件名和目标文件名相同 的解决方案

    想要在“”解决方案资源管理器“”中修改一个已经写好的文件的文件名,如图: 在改了几次后就出现了如图的问题: 然而在“解决方案资源管理器”中并没有看到,于是我打开了工程在磁盘中的位置文件夹: 意外发现了 ...

  9. 单点登录(十三)-----实战-----cas4.2.X登录启用mongodb验证方式完整流程

    我们在之前的文章中中已经讲到了正确部署运行cas server 和 在cas client中配置. 在此基础上 我们去掉了https的验证,启用了http访问的模式. 单点登录(七)-----实战-- ...

  10. 解题: SDOI 2011 染色

    题面 强行把序列问题通过树剖套在树上...算了算是回顾了一下树剖的思想=.= 每次树上跳的时候注意跳的同时维护当前拼出来的左右两条链的靠上的端点,然后拼起来的时候讨论一下拼接点,最后一下左右两边的端点 ...