元素水平垂直居中的四種方法

時間 2021-02-21

標籤 css html css3 git github 瀏覽器佈局學習 flex .net 欄目 CSS 简体版

原文原文鏈接

方法一：使用flex佈局

將父元素的display屬性設爲flex、justify-content和align-items屬性都設爲center，可讓子元素在父元素內水平垂直居中顯示。若是但願父元素覆蓋整個瀏覽器視口，能夠將父元素的高設置爲100vh、寬設置爲100vw（css3規定1vh等於視口高度的1%、1vw等於視口寬度的1%），這樣子元素就會顯示在頁面的正中間。
示例css

<body>
<div id="parent">
    <div id="children"></div>
</div>
<style>
    body{
        margin: 0;
        padding: 0;
    }
    #parent{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 500px;
        height: 500px;
        background-color: #999;
    }
    #children{
        width: 50px;
        height: 50px;
        background-color: red;
    }
</style>
</body>

圖1-子元素在父元素內水平垂直居中html

<style>
    body{
        margin: 0;
        padding: 0;
    }
    #parent{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
        background-color: #999;
    }
    #children{
        width: 50px;
        height: 50px;
        background-color: red;
    }
</style>

圖2-子元素在整個頁面內水平垂直居中css3

方法二：使用transform將元素進行移動，必要時可將margin設爲負值（須要知道元素的尺寸）

經過transform屬性的translate方法將子元素進行移動，這須要事先知道子元素和父元素的尺寸以計算出移動的距離。必要時（例如父元素與子元素寬高的單位不一樣不方便計算時）能夠將子元素的margin設爲負值，讓子元素向左和向上方各移動其自己寬高的一半。
示例git

<style>
    body{
        margin: 0;
        padding: 0;
    }
    #parent{
        width: 500px;
        height: 500px;
        background-color: #999;
    }
    #children{
        width: 50px;
        height: 50px;
        background-color: red;
        transform: translate(225px,225px);
    }
</style>

圖3-已知父元素和子元素的具體尺寸，能夠經過計算將子元素移動必定的距離使其剛好在父元素內水平垂直居中github

<style>
    body{
        margin: 0;
        padding: 0;
    }
    #parent{
        width: 100vw;
        height: 100vh;
        background-color: #999;
        overflow: hidden;
    }
    #children{
        width: 50px;
        height: 50px;
        background-color: red;
        transform: translate(50vw,50vh);
        margin-top: -25px;
        margin-left: -25px;
    }
</style>

圖4-父元素的寬高單位是vw和vh，只用transform進行移動的話不方便計算移動的距離，能夠先移動50vw和50vh，再將子元素的margin設爲負值實現水平垂直居中（給第一個子元素加margin-top，父元素會跟着移動，因此要在父元素上加上overflow: hidden，具體可參考個人另外一篇博客：https://www.cnblogs.com/ljxlijiaxin/p/14297565.html）瀏覽器

方法三：經過改變父元素和子元素的position屬性實現居中效果

給父元素設置一個不爲默認值的position屬性，再將子元素的position屬性設爲fixed或absolute。而後將子元素的top、bottom、left、right屬性都設爲0，同時margin設爲auto；或者將子元素的top、bottom、left、right屬性都設爲50%，不須要設置margin: auto，給子元素加上transform: translate(-50%,-50%)便可，這兩種寫法都能實現子元素在父元素內水平垂直居中。
示例佈局

<style>
    body{
        margin: 0;
        padding: 0;
    }
    #parent{
        width: 100vw;
        height: 100vh;
        background-color: #999;
        position: relative;
    }
    #children{
        width: 50px;
        height: 50px;
        background-color: red;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
</style>

<style>
    body{
        margin: 0;
        padding: 0;
    }
    #parent{
        width: 100vw;
        height: 100vh;
        background-color: #999;
        position: relative;
    }
    #children{
        width: 50px;
        height: 50px;
        background-color: red;
        position: absolute;
        top: 50%;
        bottom: 50%;
        left: 50%;
        right: 50%;
        transform: translate(-50%,-50%);
    }
</style>

圖5-上述兩種寫法都能實現子元素水平垂直居中學習

方法四：子元素設置display: inline-block，父元素設置text-align: center且line-height等於height

將子元素設爲行內塊元素，父元素設置左右居中，同時經過讓父元素的line-height屬性等於height屬性實現子元素上下居中。
示例flex

<style>
    body{
        margin: 0;
        padding: 0;
    }
    #parent{
        width: 100vw;
        height: 100vh;
        line-height: 100vh;
        background-color: #999;
        text-align: center;
    }
    #children{
        width: 50px;
        height: 50px;
        background-color: red;
        display: inline-block;
    }
</style>

圖6-將父元素的width設爲100vw、height和line-height設爲100vh，一樣可讓子元素在頁面上水平垂直居中.net