頑石系列：CSS實現垂直居中的五種方法

在開發過程中，我們可能沿用或者試探性地去使用某種方法實現元素居中，但是對各種居中方法的以及使用場景很不清晰。參考的內容鏈接大概如下：

• 行內元素：https://blog.csdn.net/bwf_erg/article/details/69844527
• MDN文檔：https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align
• 六種方法：https://www.jianshu.com/p/086364d3d5e2
• 五種方法：https://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods/

方法一:Vertical-Align法

　　我們使用 vertical-align:middle 來實現元素垂直居中。

　　CSS 的屬性 vertical-align 用來指定行內元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。

行內元素的記憶技巧：

　　字體大小要加粗，

　　組合圖像輸入框，

　　錨準斜體的菜單，

　　強調換行上下標

　　我們可以把div 的顯示方式設置為表格，從而使用表格的 vertical-align middle 屬性。

    <style>
        #wrapper{
            width: 200px;
            height: 200px;
            background-color: aqua;
            display: table;
        }
        #content{
            display: table-cell;
            vertical-align: middle;
        }
    </style>


    <div id="wrapper">
        <div id="content">
            Content is Here!
        </div>
    </div>

分析

優點：

• content 可以動態改變高度(不需在 CSS 中定義)。當 wrapper 裏沒有足夠空間時， content 不會被截斷

缺點：

• Internet Explorer(甚至 IE8 beta)中無效，許多嵌套標簽(其實沒那麽糟糕，另一個專題)

方法二：絕對定位+負邊距法

　　這個方法使用絕對定位的 div，把它的 top 設置為 50％，margin-top 設置為負的 content 高度。這意味著對象必須在 CSS 中指定固定的高度。因為有固定高度，也許你得給 content 指定 overflow:auto，這樣如果 content 太多的話，就會出現滾動條，以免content

<div class="content"> Content goes here</div>  

#content {
    position: absolute;
    top: 50%;
    height: 240px;
    margin-top: -120px; /* negative half of the height */
}

分析

優點：

• 適用於所有瀏覽器
• 不需要嵌套標簽

缺點：

• 沒有足夠空間時，content 會消失(類似div 在 body 內，當用戶縮小瀏覽器窗口，滾動條不出現的情況)

方法三：浮動元素法

　　這個方法的原理是利用一個空的浮動元素來控制主要內容在容器中的位置。

　　比如我們的目標是讓紅色DIV位於綠色父級元素的中間，我們要讓一個浮動元素占據黃色的位置，然後紅色元素清除浮動，自然而然到達居中位置。

        #parent {
            padding: 5% 0;
            background-color: green;
        }

        #floater {
            float: left;
            height: 50%;
            width: 100%;
            margin-bottom: -50px;
            background: yellow;
        }

        #child {
            clear: both;
            height: 100px;
            background: red;
        }

        <div id="parent">
            <div id="floater"></div>
            <div id="child">Content here</div>
        </div>

方法四：FLEX定位法

　　CSS屬性flex規定了彈性元素如何伸長或縮短以適應flex容器中的可用空間。

　　效果是這樣的：

        #wrapper{
            display: flex;
            height: 100px;
            background: green;
        }
        #content{
            margin: auto;
            background-color: red;
        }

    <div id="wrapper">
        <div id="content">
            Content is Here!
        </div>
    </div> 

　還有一種垂直居中的實現方式 ，針對移動端頁面布局的，很好用

#parent{
　　display:flex ;
　　align-items:center; 垂直居中
　　justify-content:center ; //水平居中
}

方法五：Line-Height方法

　　這個方法適用於單行文字的垂直居中，只需要將包含文字元素的容器行高設置為大於字體大小並且等於元素的高度。默認情況下，文字上下部分會留有相同的空間，因而實現了文字的垂直居中。

<div id="parent">
    <div id="child">Text here</div>
</div>

#child {
    line-height: 200px;
}

　　這種方法只適用於單行文字的垂直居中，如果需要多行文字居中，需要選擇其他方法。

頑石系列：CSS實現垂直居中的五種方法