從一個(gè)居中方法說(shuō)起 —— 談 translate 與相對(duì)、絕對(duì)定位

DandJ 發(fā)布于2019-08-28 18:03 / 3231人閱讀

摘要：方法介紹垂直水平居中是日常前端開發(fā)當(dāng)中一個(gè)常見的需求，在支持屬性的現(xiàn)代瀏覽器當(dāng)中，有一個(gè)利用屬性的垂直水平居中方法例子傳送門請(qǐng)用現(xiàn)代瀏覽器打開從上面的例子看到，無(wú)論我們?cè)鯓诱{(diào)整窗口的大小，紅色方塊始終會(huì)在窗口垂直水平居中。

方法介紹

垂直水平居中是日常前端開發(fā)當(dāng)中一個(gè)常見的需求，在支持 CSS3 屬性的現(xiàn)代瀏覽器當(dāng)中，有一個(gè)利用 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%); 
    }

例子傳送門（請(qǐng)用現(xiàn)代瀏覽器打開）

從上面的例子看到，無(wú)論我們?cè)鯓诱{(diào)整窗口的大小，紅色方塊始終會(huì)在窗口垂直、水平居中。

原理

為了解釋原理，我們創(chuàng)建兩個(gè)元素:

先不加上 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個(gè)像素，如果我們想實(shí)現(xiàn)垂直水平居中，就應(yīng)該將紅色方塊的中心點(diǎn)移動(dòng)到目前元素左上角的位置，也就是分別向上和向左移動(dòng)一半方塊邊長(zhǎng)的長(zhǎng)度，50個(gè)像素。

     #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 函數(shù)當(dāng)中使用百分比是以該元素的內(nèi)容區(qū)、補(bǔ)白(padding)、邊框(border)為標(biāo)準(zhǔn)計(jì)算的，為了說(shuō)明這一點(diǎn)，我們?cè)?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 與絕對(duì)定位、相對(duì)定位

在表現(xiàn)上看，使用 CSS3 translate 函數(shù)和絕對(duì)定位、相對(duì)定位屬性加上 top、left 數(shù)值都可以使元素產(chǎn)生位移。實(shí)際上它們還是有不少的區(qū)別。

元素視圖屬性中的 offsetLeft 和 offsetTop 屬性。

我們分別用相對(duì)定位和 translate 的方法來(lái)使元素產(chǎn)生位移：

    #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 的數(shù)值：

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

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

使用相對(duì)定位的例子

使用 translate 的例子

可以看出使用 translate 的例子的 offsetTop 和 offsetLeft 的數(shù)值與沒(méi)有產(chǎn)生位移的元素沒(méi)有然后區(qū)別，無(wú)論位移多少這兩個(gè)數(shù)值都是固定不變的。

而使用相對(duì)定位的例子 offsetTop 和 offsetLeft 的數(shù)值則根據(jù)位移的長(zhǎng)度發(fā)生了改變。

動(dòng)畫表現(xiàn)的區(qū)別

在 CSS3 屬性還沒(méi)很好地被瀏覽器支持的時(shí)候，我們常常會(huì)使用絕對(duì)定位(position:absolute)，然后結(jié)合 jQuery 改變?cè)氐?top、left 的數(shù)值來(lái)做位移的動(dòng)畫效果。

然而，兩者在位移動(dòng)畫的表現(xiàn)上也有一定的區(qū)別。借用國(guó)外博主 Paul Irish 的兩個(gè)例子：

Animating with Top/Left

Animating with Translate

對(duì)比兩個(gè)例子來(lái)看，可以看出使用 translate 來(lái)制作的動(dòng)畫比絕對(duì)定位的動(dòng)畫更加平滑。

原因在于使用絕對(duì)定位的動(dòng)畫效果會(huì)受制于利用像素(px)為單位進(jìn)行位移，而使用 translate 函數(shù)的動(dòng)畫則可以不受像素的影響，以更小的單位進(jìn)行位移。

另外，絕對(duì)定位的動(dòng)畫效果完全使用 CPU 進(jìn)行計(jì)算，而使用 translate 函數(shù)的動(dòng)畫則是利用 GPU，因此在視覺(jué)上使用 translate 函數(shù)的動(dòng)畫可以有比絕對(duì)定位動(dòng)畫有更高的幀數(shù)。

最后

CSS3 動(dòng)畫相關(guān)的屬性出現(xiàn)以后，可以讓我們更加輕松地制作復(fù)雜的動(dòng)畫，同時(shí) position:relative 和 position:absolute 這一類的屬性可以回歸它們?cè)镜亩ㄎ唬瑸槎ㄎ弧⒉季址?wù)，而將動(dòng)畫的重任交給 CSS3 的相關(guān)屬性。

感謝您的閱讀，有不足之處請(qǐng)為我指出。

參考

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

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

云服務(wù)器 GPU云服務(wù)器相對(duì)定位-絕對(duì)定位相對(duì)路徑絕對(duì)路徑相對(duì)定位絕對(duì)居中

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/110985.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

DandJ

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

基于javaweb+jsp的學(xué)生宿舍管理系統(tǒng)

閱讀 3273·2021-11-23 09:51
LockFile勒索軟件使用前所未有的加密技術(shù)逃避檢測(cè)

閱讀 938·2021-09-03 10:30
#便宜#HostSailor：1核/256M/15G HDD/256G流量/1Gbps/1IP/荷蘭

閱讀 3212·2021-08-31 09:40
你不知道的width:auto

閱讀 3277·2019-08-30 14:22
css布局中左側(cè)固定右側(cè)自適應(yīng)

閱讀 902·2019-08-30 14:09
推銷自己的前端技術(shù)書籍

閱讀 2900·2019-08-30 13:21
從一個(gè)居中方法說(shuō)起 —— 談 translate 與相對(duì)、絕對(duì)定位

閱讀 3232·2019-08-28 18:03
適合初學(xué)者觀看的深入淺出react全家桶（一）

閱讀 2859·2019-08-26 13:44

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

從一個(gè)居中方法說(shuō)起 —— 談 translate 與相對(duì)、絕對(duì)定位

相關(guān)文章

css魔幻屬性跟進(jìn)篇

CSS 布局經(jīng)典問(wèn)題初步整理

整理：子容器垂直居中于父容器的方案

**水平居中、垂直居中、水平垂直居中、浮動(dòng)居中、絕對(duì)定位居中.......幫你搞定**

CSS || 元素垂直居中筆記

發(fā)表評(píng)論

0條評(píng)論

DandJ

男|高級(jí)講師

TA的文章

基于javaweb+jsp的學(xué)生宿舍管理系統(tǒng)

LockFile勒索軟件使用前所未有的加密技術(shù)逃避檢測(cè)

#便宜#HostSailor：1核/256M/15G HDD/256G流量/1Gbps/1IP/荷蘭

你不知道的width:auto

css布局中左側(cè)固定右側(cè)自適應(yīng)

推銷自己的前端技術(shù)書籍