position:absolute的容器居中

Ku_Andrew 發布于2019-08-29 11:03 / 1375人閱讀

摘要：頁面開發中，最經常是使用的當然要屬于容器居中啦，居中有時候是一個很簡單的問題，但是有時候也讓人苦惱的牙癢癢代碼如下代碼不占據文檔流，水平居中如下代碼占據文檔流，水平居中如下那如果想要水平垂直居中的話，就要像下面這么寫啦代碼和代碼

web頁面開發中，最經常是使用的當然要屬于容器居中啦，“居中”有時候是一個很簡單的問題，但是！有時候也讓人苦惱的“牙癢癢”！
HTML代碼如下：


    child container

CSS代碼（不占據文檔流，水平居中）如下：

#parents {
    width: 100%;
    position: relative;
    background-color: pink;
}
#child {
    width: 200px;
    height: 50px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    background-color: #1fb554;
    text-align: center;
}

CSS代碼（占據文檔流，水平居中）如下：

#parents {
    width: 100%;
    position: relative;
    background-color: pink;
}
#child {
    width: 200px;
    height: 50px;
    margin: auto;
    background-color: #1fb554;
    text-align: center;
}

那如果想要水平垂直居中的話，就要像下面這么寫啦~
HTML代碼和CSS代碼如下：

#content{
    position:absolute;
    width:650px;
    height:298px;
    left:50%;
    top:50%;
    margin-left:-325px;  /*設置為寬度的一半*/
    margin-top:-149px;   /*設置為高度的一半*/
    background-color: pink;
}

HELLO, WORLD!

但是，上面有一個需要注意的地方，就是如果#content有父容器，那么其父容器的position不能設置成relative，否則垂直居中會失效————我學的還不夠扎實，具體為什么會失效，我一下也將不出來，若以后長知識了，我再不上去，或者‘米娜桑’有知道的，也可以貼出來~~

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

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

CSS元素（文本、圖片）水平垂直居中方法

摘要：上下左右負偽元素父容器上設置用于設置為行內元素的水平居中居中元素自身設置用于設置為塊級元素的水平居中元素寬度固定，且不能浮動絕對定位? 1、text-align:center; 2、margin:0 auto; 3、display:inline-block; + text-align:center; 4、position:relative; + float:left; 5、line-heig...

wuyangnju 2019-04-23 13:08 評論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
垂直水平居中方法小結

摘要：前言最近看到很多面試題目會問請說出幾種使用完成垂直水平居中的方法正好看基礎的時候看到一篇文章是講完全居中的，這邊對于文章中的內容做個小結。具體代碼如下使用完成垂直水平居中該方法的核心思想是使用表格來實現垂直居中，再使用來實現水平居中。前言：最近看到很多面試題目會問：請說出幾種使用css完成垂直水平居中的方法？正好看css基礎的時候看到一篇文章是講完全居中的，這邊對于文章中的內容做個小...

amuqiao 2019-08-29 17:00 評論0 收藏0