絕對定位元素設(shè)置水平居中

wujl596 發(fā)布于2019-08-01 16:25 / 3131人閱讀

摘要：需求有時頁面內(nèi)的一些容器需要定位在特定的某個位置，但是需要容器在水平方向上面居中顯示，比如頁面內(nèi)的一個背景圖里面放置一個容器，使用不方便，就決定使用絕對定位來設(shè)置。方法三實現(xiàn)絕對定位元素的居中有了這個就自動居中了

需求：有時頁面內(nèi)的一些容器需要定位在特定的某個位置，但是需要容器在水平方向上面居中顯示，比如頁面內(nèi)的一個背景圖里面放置一個容器，使用margin-top不方便，就決定使用絕對定位來設(shè)置。

實現(xiàn)方法：
方法一、知道容器尺寸的前提下

.element {
    width: 600px; height: 400px;
    position: absolute; 
    left: 50%; 
    top: 50%;
    margin-top: -200px;    /* 高度的一半 */
    margin-left: -300px;    /* 寬度的一半 */
}

缺點：該種方法需要提前知道容器的尺寸，否則margin負值無法進行精確調(diào)整，此時需要借助JS動態(tài)獲取。

方法二、容器尺寸未知的前提下，使用CSS3的transform屬性代替margin，transform中的translate偏移的百分比值是相對于自身大小的，設(shè)置示例如下：

.element {
    position: absolute; 
    left: 50%; 
    top: 50%;
    transform: translate(-50%, -50%); /* 50%為自身尺寸的一半 */
    -webkit-transform: translate(-50%, -50%);
}

缺點：兼容性不好，IE10+以及其他現(xiàn)代瀏覽器才支持。中國盛行的IE8瀏覽器被忽略是有些不適宜的（手機web開發(fā)可忽略）。

方法三、margin: auto實現(xiàn)絕對定位元素的居中

.element {
    width: 600px; height: 400px;
    position: absolute;
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0;
    margin: auto;  /* 有了這個就自動居中了 */
}

云服務(wù)器 GPU云服務(wù)器水平居中絕對居中水平垂直居中水平居中布局

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50502.html

相關(guān)文章

水平居中、垂直居中、水平垂直居中、浮動居中、絕對定位居中.......幫你搞定

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

waterc 2019-08-29 15:32 評論0 收藏0
主流的CSS水平和垂直居中技術(shù)大全

摘要：水平居中行內(nèi)元素的水平居中在父元素中設(shè)置只對內(nèi)聯(lián)元素或行內(nèi)塊元素有效需要放置于父元素中塊級元素的水平居中只對塊級元素有效指的是自適應(yīng)寬度。參考張鑫旭實現(xiàn)絕對定位元素的居中及原理居中方式水平居中垂直居中塊級元素設(shè)置內(nèi)聯(lián)元素設(shè)置。原文地址：https://www.xksblog.top/CSS-mainstream-centering-techniques.html 幾個月也零零散散學...

KoreyLee 2019-08-29 16:26 評論0 收藏0
如何居中一個元素（終結(jié)版）

摘要：源代碼演示利用將要水平排列的塊狀元素設(shè)為，然后在父級元素上設(shè)置，達到與上面的行內(nèi)元素的水平居中一樣的效果。前言本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，思維導圖如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導圖，請猛戳Github個人博客一、水平居中 1.行內(nèi)元素水平居...

Hydrogen 2019-08-29 16:56 評論0 收藏0
如何居中一個元素（終結(jié)版）

摘要：源代碼演示利用將要水平排列的塊狀元素設(shè)為，然后在父級元素上設(shè)置，達到與上面的行內(nèi)元素的水平居中一樣的效果。前言本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，思維導圖如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導圖，請猛戳Github個人博客一、水平居中 1.行內(nèi)元素水平居...

hlcc 2019-08-02 11:43 評論0 收藏0
如何居中一個元素（終結(jié)版）

摘要：源代碼演示利用將要水平排列的塊狀元素設(shè)為，然后在父級元素上設(shè)置，達到與上面的行內(nèi)元素的水平居中一樣的效果。前言本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，思維導圖如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導圖，請猛戳Github個人博客一、水平居中 1.行內(nèi)元素水平居...

Meils 2019-08-23 12:20 評論0 收藏0
水平垂直居中小結(jié)

摘要：相等的上下值三水平垂直居中絕對定位和負外邊距使用絕對定位實現(xiàn)水平垂直居中時，元素的和應(yīng)該等于對應(yīng)的和值的一半再取負值。相對定位或絕對定位均可絕對定位和布局能實現(xiàn)居中效果的方法還有很多，這里列出來的方法只是一小部分，日后會慢慢補充。 ??我們在頁面布局中經(jīng)常會遇到需要將內(nèi)容水平/垂直居中的情況，現(xiàn)在我們就來梳理一下實現(xiàn)的方法。一、水平居中 ??1.行元素設(shè)置其父元素的text-alig...

xuxueli 2019-08-29 16:35 評論0 收藏0