<ul id="igig0"></ul>

絕對定位元素設置水平居中

wujl596 發布于2019-08-01 16:25 / 3125人閱讀

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

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

實現方法：
方法一、知道容器尺寸的前提下

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

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

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

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

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

方法三、margin: auto實現絕對定位元素的居中

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

GPU云服務器云服務器水平居中絕對居中水平垂直居中水平居中布局

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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