从一个居中方法说起 —— 谈 translate 与 相对、绝对定位

转载 2015年07月07日 17:22:57

方法介绍

垂直水平居中是日常前端开发当中一个常见的需求,在支持 CSS3 属性的现代浏览器当中,有一个利用 CSS3 属性的垂直水平居中方法:

    .center {
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%); 
    }

例子传送门 (请用现代浏览器打开)

从上面的例子看到,无论我们怎样调整窗口的大小,红色方块始终会在窗口垂直、水平居中。

原理

为了解释原理,我们创建两个元素:

    <div id="outer">
        <div id="inner">
        </div>
    </div>

先不加上 transform 属性:

    #outer {
        position: relative;
        width: 500px;
        height: 500px;
        border: 2px solid yellow;
    }

    #inner {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        background-color: red;
    }

未加上 transform 属性的例子

图片描述

可以看到红色方块左、上方距离外层方块的距离都是250个像素,如果我们想实现垂直水平居中,就应该将红色方块的中心点移动到目前元素左上角的位置,也就是分别向上和向左移动一半方块边长的长度,50个像素。

     #inner {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        background-color: red;
        -ms-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }

加上 transform 属性

所以我们可以看到在 translate 函数当中使用百分比是以该元素的内容区、补白(padding)、边框(border)为标准计算的,为了说明这一点,我们在 innner 元素加上一些 padding 和 border:

    #inner {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        border: 25px solid yellow;
        padding: 25px;
        background-color: red;
        -ms-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
   }

加上 padding 和 border 以后

可以看到 inner 元素一样做到了垂直、水平居中。

translate 与绝对定位、相对定位

在表现上看,使用 CSS3 translate 函数和绝对定位、相对定位属性加上 topleft 数值都可以使元素产生位移。实际上它们还是有不少的区别。

元素视图属性中的 offsetLeft 和 offsetTop 属性。

我们分别用相对定位和 translate 的方法来使元素产生位移:

    #box1 {
        position: relative;
        width: 50px;
        height: 50px;
        background-color: blue;
        top: 100px;
        left: 300px;
   }
   #box2 {
       width: 50px;
       height: 50px;
       background-color: red;
       -ms-transform: translate(300px,100px);
       -moz-transform: translate(300px,100px);
       -o-transform: translate(300px,100px);
       transform: translate(300px,100px);
   }

然后看看两者的 offsetTop 和 offsetLeft 的数值:

    var box1 = document.getElementById("box1");

    alert(box1.offsetLeft);
    alert(box1.offsetTop);
    var box2 = document.getElementById("box1");

    alert(box2.offsetLeft);
    alert(box2.offsetTop);

使用相对定位的例子

使用 translate 的例子

可以看出使用 translate 的例子的 offsetTop 和 offsetLeft 的数值与没有产生位移的元素没有然后区别,无论位移多少这两个数值都是固定不变的。

而使用相对定位的例子 offsetTop 和 offsetLeft 的数值则根据位移的长度发生了改变。

动画表现的区别

在 CSS3 属性还没很好地被浏览器支持的时候,我们常常会使用绝对定位(position:absolute),然后结合 jQuery 改变元素的 topleft 的数值来做位移的动画效果。

然而,两者在位移动画的表现上也有一定的区别。借用国外博主 Paul Irish 的两个例子:

Animating with Top/Left

Animating with Translate

对比两个例子来看,可以看出使用 translate 来制作的动画比绝对定位的动画更加平滑。

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

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

最后

CSS3 动画相关的属性出现以后,可以让我们更加轻松地制作复杂的动画,同时 position:relative 和position:absolute 这一类的属性可以回归它们原本的定位,为定位、布局服务,而将动画的重任交给 CSS3 的相关属性。

【CSS3】变形--位移 translate()

translate()函数可以将元素向指定的方向移动,类似于position中的relative。或以简单的理解为,使用translate()函数,可以把元素从原来的位置移动,而不影响在X、Y轴上的任...
  • happyhaojie
  • happyhaojie
  • 2016年02月24日 15:52
  • 18671

关于CSS3中transform属性对元素布局的影响。

今天了解transform属性时发现一个奇怪的现象,就是使用transform属性的时候,无论是translate,rotate,skew还是scale,对于伪元素:after和:before,都会产...
  • C860_zy
  • C860_zy
  • 2013年12月26日 23:44
  • 2501

浅谈translate属性与相对定位、绝对定位的区别

水平垂直居中的实现方式有多种,请见:http://blog.csdn.net/zhouziyu2011/article/details/53514416 在支持 CSS3 属性的现代浏览器当中,可...
  • zhouziyu2011
  • zhouziyu2011
  • 2017年05月08日 22:03
  • 905

Web前端面试指导(十四):如何居中一个元素(正常、绝对定位、浮动元素)?

题目点评 这道题目的提问比较多,连续问了三个问题,正常元素、绝对定位元素、互动元素如何居中,而且居中没有说清楚是垂直居中还是水平居中,要回答清楚这个问题,必须得有深厚的功底,而且要分类的来回答,条理要...
  • lxcao
  • lxcao
  • 2016年09月26日 16:34
  • 4507

如何使一个绝对定位的元素居中显示

首先,我们说一下标准流中的元素如何水平居中,很简单margin:0 auto 但是在绝对定位的,这个属性就失效了,这个时候我们该怎么解决这个问题呢? 首先这里声明,绝对定位的居中显示,前提条件是在...
  • XBQ0510Qi
  • XBQ0510Qi
  • 2018年01月11日 20:22
  • 7

怎么给网页写一个侧栏(横向两列布局-使用绝对定位和相对定位的方法)

像是一个这样的网页 他有3个主栏,1个侧栏。这个应该怎么来实现? ………………………………………………………………………………………………………………………… 我觉得是这样的,就是我们在写一个网页...
  • happymorecc
  • happymorecc
  • 2017年07月19日 08:54
  • 382

css3 让绝对定位元素水平居中的方法

一、绝对定位元素的居中实现 如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了。 兼容性不错的主流用法是: 1 2 3 4 5 6 .elemen...
  • qq_27682041
  • qq_27682041
  • 2017年06月30日 15:19
  • 918

使用css的绝对定位来控制页面居中的方法之一

直接上代码。。。 1.绝对居中(水平和垂直方向都居中) #main{ /*css只有这种注释方法,不能用双斜线注释,否则会发生你意想不到的问题*/ position:absolut...
  • zgrjkflmkyc
  • zgrjkflmkyc
  • 2015年03月18日 09:43
  • 2838

CSS布局(绝对定位/相对定位/浮动/显示与隐藏/居中)(好)

CSS布局(绝对定位/相对定位/浮动/显示与隐藏/居中)
  • sunxiaofre
  • sunxiaofre
  • 2017年03月16日 22:35
  • 561

CSS设计的美丽之佛背景、相对定位、绝对定位、box居中(小作品)

无聊时,自己再做一个作品。
  • h15882065951
  • h15882065951
  • 2017年05月21日 18:24
  • 313
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:从一个居中方法说起 —— 谈 translate 与 相对、绝对定位
举报原因:
原因补充:

(最多只允许输入30个字)