CSS(3)實現水平垂直居中效果

CSS實現水平垂直居中對齊

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

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

水平垂直居中的實現能夠分爲兩大內容，一是高度隨內容自適應變化，一是固定高度。

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

方法一

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

<div class="container">Hello World！</div>

.container {
    width: 300px;
    height: 300px;
    line-height: 300px;
    text-align: center;
    border: 1px solid red;
}

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

方法二

使用絕對定位的方法，配合margin負值使用。能夠實現元素的水平垂直居中效果。

<div class="container">Hello World！</div>

.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;
}

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

方法三

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

<div class="space"></div>
<div class="container">
    <div class="inner">
        hello world！
    </div>
</div>

.space {
    float: left;
    height: 50%;
    margin-top: -150px;
}

.container {
    clear: both;
    height: 300px;
    border: 1px solid red;
    position: relative;
}

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

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

方法一

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

<div class="container">Hello World！</div>

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); // 自身寬度和高度的一半
    border: 1px solid red;
}

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

方法二

咱們知道，可使用margin來實現水平居中對齊，而沒法使用margin實現垂直居中的緣由在於margin的百分比值是基於寬度計算的。

<div class="container">Hello World！</div>

.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。所以，以上代碼可改成以下，便可實現水平垂直居中效果。

<div class="container">Hello World！</div>

.container {
    width: 300px;
    margin: 50vh auto 0;
    transform: translateY(-50%);
    border: 1px solid red;
}

方法三

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

<div class="container">
    <div class="inner">
        <p>hello world!</p>
    </div>
</div>

.container {
    display: flex;
    height: 100vh;
}

.inner {
    margin: auto;
}

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

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

<div class="container">
    <div class="inner">
        <p>hello world</p>
    </div>
</div>

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

方法四

可使用display: table來模擬表格，並給子元素設置display: table-cell，讓其成爲表格的某個單元格，同時設置vertical-align: middle，便可實現垂直居中佈局

<div class="container">
    <div class="inner">
        hello world！
    </div>
</div>

.container {
    display: table;         /* 讓div以表格的形式渲染 */
    width: 100%;
    border: 1px solid red;
}

.inner {
    display: table-cell;    /* 讓子元素以表格的單元格形式渲染 */
    text-align: center;
    vertical-align: middle;
}

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