相关样式居中笔记一：translate 与相对、绝对定位

方法介绍

垂直水平居中是日常前端开发当中一个常见的需求，在支持 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 函数和绝对定位、相对定位属性加上 top、left 数值都可以使元素产生位移。实际上它们还是有不少的区别。

元素视图属性中的 `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 的数值则根据位移的长度发生了改变。