從一個居中方法說起 —— 談 translate 與相對、絕對定位

DandJ 發布于2019-08-28 18:03 / 3243人閱讀

摘要：方法介紹垂直水平居中是日常前端開發當中一個常見的需求，在支持屬性的現代瀏覽器當中，有一個利用屬性的垂直水平居中方法例子傳送門請用現代瀏覽器打開從上面的例子看到，無論我們怎樣調整窗口的大小，紅色方塊始終會在窗口垂直水平居中。

方法介紹

垂直水平居中是日常前端開發當中一個常見的需求，在支持 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%); 
    }

例子傳送門（請用現代瀏覽器打開）

從上面的例子看到，無論我們怎樣調整窗口的大小，紅色方塊始終會在窗口垂直、水平居中。

原理

為了解釋原理，我們創建兩個元素:

先不加上 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/

GPU云服務器云服務器相對定位-絕對定位相對路徑絕對路徑相對定位絕對居中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/110985.html

css魔幻屬性跟進篇

摘要：中是這樣定義的屬性指定一個元素應沿其容器的左側或右側放置，允許文本和內聯元素環繞它。其同樣適用于設置屬性為絕對定位或固定定位的內聯元素。至于為什么，可以理解為內聯元素沒有盒模型，其高度由內容決定。白話：即上一篇我腦中飄來飄去的css魔幻屬性自己的文章推出之后，這是自己寫的第四篇CSS相關的文章，文章絕大部分是自己工作總結得來，另一部分是平日sf回答的與面試中向面試官交流學到的，都是一...

oogh 2019-08-30 14:16 評論0 收藏0
CSS 布局經典問題初步整理

摘要：布局經典問題初步整理標簽前端本文主要對布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負，清除浮動，居中布局，響應式設計，布局，等等。 CSS 布局經典問題初步整理標簽：前端 [TOC] 本文主要對 CSS 布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應式設計，Fl...

Amos 2019-08-29 12:36 評論0 收藏0
整理：子容器垂直居中于父容器的方案

摘要：子容器溢出時，父容器出現滾動條。父容器或很顯然，子容器溢出時，被父容器截斷的情形無法和父容器自適應于子容器共存。現在這個布局可以自動生成，詳見林小志的小工具圖片垂直居中。溢出子容器溢出時會變成頂對齊，原因同上。本文在evernote里有備份。如果evernote的閱讀區域嫌窄了，那么可以把這個鏈接拖入書簽并點擊javascript:jQuery(#container).width(9...

youkede 2019-08-28 17:51 評論0 收藏0
水平居中、垂直居中、水平垂直居中、浮動居中、絕對定位居中.......幫你搞定

摘要：包括水平居中，垂直居中，還有水平垂直居中。如果要再要細分，還要分浮動元素絕對定位的居中。樣式水平居中的元素圖片的水平居中圖片的居中，比較特殊。 2018.05.29 居中一個元素？你會想到啥？這里面的知識還真不少。包括水平居中，垂直居中，還有水平垂直居中。如果要再要細分，還要分浮動元素、絕對定位的居中。為了代碼簡介，沒有加背景和其他樣式，需要看效果的，可以加上背景。目錄：第一...

waterc 2019-08-29 15:32 評論0 收藏0
CSS || 元素垂直居中筆記

摘要：種元素垂直居中根據不同情況，使用的垂直居中方式各異針對塊級元素與行級元素的垂直居中不同。行級元素行內包含特殊元素如果行內包含特殊元素圖片輸入框元素或者粗體使用設置對齊方式即可垂直居中。 CSS種元素垂直居中根據不同情況，使用的垂直居中方式各異：針對塊級元素與行級元素的垂直居中不同。 1 行級元素 1.1 行內包含特殊元素如果行內包含特殊元素：圖片、input輸入框、inline-...

VPointer 2019-08-29 12:12 評論0 收藏0