首頁  >  文章  >  web前端  >  CSS實作水平垂直居中的幾種方法介紹

CSS實作水平垂直居中的幾種方法介紹

零下一度
零下一度原創
2017-06-27 09:41:431681瀏覽

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

使用此種方式,不需要固定高度。只需要給定任意高度或不給高度,即可達到水平垂直居中效果。

以上是CSS實作水平垂直居中的幾種方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn