CSS(3)實現水平垂直置中效果的總結

CSS實現水平垂直置中對齊

在CSS中實現水平置中，會比較簡單。常見的，如果想實現inline元素或者inline-block元素水平置中，可以在其父級區塊層級元素上設定text-align: center實現；如果想實現區塊層級元素的水平置中對齊，可以設定magin: auto。而如果想實現垂直置中對齊，或許就不太容易。

以下，我總結了一些實現水平垂直置中對齊的一些方法。如果有什麼不足之處，望指出。

水平垂直置中的實現可以分為兩大內容，一是高度隨內容自適應變化，一是固定高度。

固定高度實現水平垂直置中

方法一

最常用的方法是使用height + line-height的方式，設定同樣的值，配合text-align的使用，即可實現文本的水平垂直置中對齊

<p class="container">Hello World！</p>.container {    width: 300px;    height: 300px;    line-height: 300px;    text-align: center;    border: 1px solid red;}

缺點：固定高度，無法實現兩行文本的垂直置中對齊

方法二

使用絕對位置的方法，配合margin負值使用。可以實現元素的水平垂直置中效果。

<p class="container">Hello World！</p>.container {    position: absolute;    left: 50%;    top: 50%;    margin-left: -150px;    margin-top: -150px;    width: 300px;    height: 300px;    border: 1px solid red;}

當然了，可以使用CSS3的calc函數簡化上面的CSS代碼

.container {    position: absolute;    left: calc(50% - 150px);    top: calc(50% - 150px);    width: 300px;    height: 300px;    border: 1px solid red;}

缺點：固定高度，高度無法自適應內容。元素脫離文檔流。

方法三

添加空標籤的方式，並且使該元素浮動，脫離文檔流，避免影響其他元素的布局。

<p class="space"></p><p class="container">    <p class="inner">        hello world！    </p></p>.space {    float: left;    height: 50%;    margin-top: -150px;}.container {    clear: both;    height: 300px;    border: 1px solid red;    position: relative;}

缺點：這種方式下的垂直置中需要固定高度，無法實現內容自適應高度。同時，出現多餘的空p元素。

高度自適應實現水平垂直置中

方法一

CSS3中有transform屬性，此屬性下有一個translate移動函數，此函數接受兩個參數。如果兩個參數都為百分比值，此時會基於自身寬度和高定進行移動。此函數移動的機制同position:relative相似。

<p class="container">Hello World！</p>.container {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%); // 自身寬度和高度的一半    border: 1px solid red;}

優點：無需定高度。高度隨內容自適應。
缺點：元素脫離文檔流。如果需要置中的元素已經在高度上超過了視口，那它的頂部會被視口裁切掉。

方法二

我們知道，可以使用margin來實現水平置中對齊，而無法使用margin實現垂直置中的原因在於margin的百分比值是基於寬度計算的。

<p class="container">Hello World！</p>.container {    width: 300px;    margin: 50% auto 0;    border: 1px solid red;    tarnsform: translateY(-50%);}

上面代碼中，由於百分比是基於父元素（此時的父元素為body元素）的寬度計算的，所以此時的50%加上translate負值並不能實現垂直置中布局。

不過，CSS中存在一個vh（視口高度）,也就相當於DOM中document.body.clientHeight或者document.documentElement.clientHeight的高度，1vh=1%，即1vh等於視口高度的1%。vh單位的瀏覽器安全色性問題可看vh。因此，以上代碼可改為如下，即可實現水平垂直置中效果。

<p class="container">Hello World！</p>.container {    width: 300px;    margin: 50vh auto 0;    transform: translateY(-50%);    border: 1px solid red;}

方法三

CSS3中存在flex布局（伸縮布局盒模型，也叫彈性布局盒模型），對於flex熟悉的朋友來說，使用flex實現水平垂直置中是再簡單不過的了。

<p class="container">    <p class="inner">        <p>hello world!</p>    </p></p>.container {    display: flex;    height: 100vh;}.inner {    margin: auto;}

當我們使父元素display: flex時，margin: auto不僅可以水平置中，也能夠實現垂直置中。這是因為auto外邊距會平分水平或垂直方向上的額外空間。

當然，也可以使用justify-content: center來定義彈性項目主軸的對齊，align-items: center來定義彈性項目側軸的對齊。

<p class="container">    <p class="inner">        <p>hello world</p>    </p></p>.container {    display: flex;    justify-content: center;    align-items: center;    height: 100vh;}

方法四

可以使用display: table來類比表格，並給子項目設定display: table-cell，讓其成為表格的某個儲存格，同時設定vertical-align: middle，即可實現垂直置中布局

<p class="container">    <p class="inner">        hello world！    </p></p>.container {    display: table;         /* 讓p以表格的形式渲染 */    width: 100%;    border: 1px solid red;}.inner {    display: table-cell;    /* 讓子項目以表格的儲存格形式渲染 */    text-align: center;    vertical-align: middle;}

使用此種方式，不需要固定高度。只需要給定任意高度或者不給高度，即可實現水平垂直置中效果。