從一個居中方法提及 —— 談 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 的數值則根據位移的長度發生了改變。

動畫表現的區別

在 CSS3 屬性還沒很好地被瀏覽器支持的時候，咱們經常會使用絕對定位(position:absolute)，而後結合 jQuery 改變元素的 top、left 的數值來作位移的動畫效果。

然而，二者在位移動畫的表現上也有必定的區別。借用國外博主 Paul Irish 的兩個例子：

Animating with Top/Left

Animating with Translate

對比兩個例子來看，能夠看出使用 translate 來製做的動畫比絕對定位的動畫更加平滑。

緣由在於使用絕對定位的動畫效果會受制於利用像素(px)爲單位進行位移，而使用 translate 函數的動畫則能夠不受像素的影響，以更小的單位進行位移。

另外，絕對定位的動畫效果徹底使用 CPU 進行計算，而使用 translate 函數的動畫則是利用 GPU，所以在視覺上使用 translate 函數的動畫能夠有比絕對定位動畫有更高的幀數。

最後

CSS3 動畫相關的屬性出現之後，可讓咱們更加輕鬆地製做複雜的動畫，同時 position:relative 和 position:absolute 這一類的屬性能夠迴歸它們本來的定位，爲定位、佈局服務，而將動畫的重任交給 CSS3 的相關屬性。

感謝您的閱讀，有不足之處請爲我指出。

參考

Why Moving Elements With Translate() Is Better Than Pos:abs Top/left

本文同步於個人我的博客 http://blog.acwong.org/2014/12/21/css3-middle-translate-and-relative/