瞭解實現css水平垂直居中的方法

時間 2020-08-21

標籤瞭解實現 css 水平垂直居中方法欄目 CSS 简体版

原文原文鏈接

CSS居中是前端工程師常常要面對的問題，也是基本技能之一。html

今天將以往使用過的方法作一個總結，包括水平居中，垂直居中及水平垂直居中方案。本文對一些相似方案進行歸類總結，整理結果以下。後面若有新方案，還會陸續的補充進來。前端

DEMO

<style>
.element_box {
    width: 600px;
    height: 300px;
    color: #0aa;
    border: 1px solid #0aa;
}
.element_item {
    width: 300px;
    height: 150px;
    margin: 0 auto;
    color: #fff;
    background: #0aa;
}
</style>

<div class="element_box">
    <div class="element_item"></div>
</div>

水平居中

1.margin：auto

塊（block）元素水平居中，子元素 margin: auto。git

<style>
    .element_item1 {
        margin: 0 auto;
    }
</style>
<div class="element_box">
    <div class="element_item element_item1">
        玉爐香，紅蠟淚，偏照畫堂秋思。眉翠薄，鬢雲殘，夜長衾枕寒。梧桐樹，三更雨，不道離情正苦。一葉葉，一聲聲，空階滴到明。
    </div>
</div>

查看DEMOgithub

2.text-align：center

行內（inline-block、inline）元素水平居中。父元素 text-align: center。前端工程師

<section>
    <style>
        .element_box2 {
            text-align: center;
        }
    </style>
    <div class="element_box element_box2">
        <span>
            曾覺得真情會在你個人心間永駐，<br>
            曾覺得一生都要愛下去。<br>
            但終究，時光也會老去，人心也會變淡，<br>
            走着走着便忘了曾經，<br>
            想着想着便走錯了地方。<br>
            有一天仍是要面對分離，<br>
            面對這情深緣淺的現實；<br>
            有一天咱們會分道楊鑣，<br>
            變成了最熟悉的陌生人。
        </span>
    </div>
</section>

查看DEMOfrontend

垂直居中

3.height + line-height

單行文字垂直居中，父元素height值 === line-height值。佈局

<style>
    .element_box3 {
        height: 300px;
        line-height: 300px;
    }
</style>
<div class="element_box element_box3">
    <span>玉爐香，紅蠟淚，偏照畫堂秋思。</span>
</div>

查看DEMOflex

4.幽靈元素

若是一個父元素中，有兩個inline-block的子元素，且這兩個子元素vertical-align: middle，那麼這兩個元素在垂直方向是居中的。url

思路再擴展下，若是其中一個子元素的高度跟父元素同樣，那麼這兩個子元素，在父元素都是垂直居中了。按此思路，元素垂直居中的實現：給父元素設置一個僞元素，display: inline-block; width: 0; height: 100%，且設置爲在頁面不可見，咱們稱這個僞元素爲"幽靈元素"，經過給幽靈元素和子元素設置 vertical-align: middle 能夠實現垂直居中。spa

<style>
    .element_box4 {
        font-size: 0;
    }
    .element_box4::after {
        display: inline-block;
        width: 0;
        height: 100%;
        content: ' ';
        visibility: hidden;
        vertical-align: middle;
    }
    .element_item4 {
        font-size: 16px;
        display: inline-block;
        vertical-align: middle;
    }
</style>
<div class="element_box element_box4">
    <div class="element_item4">
        要走的終究是要走，想離開的最終仍是會離開，沒有那些敷衍的理由，留下的，只是那些沒有保鮮期的諾言；一本往事錄，合上的是誰的歸宿，那曾經怒放的花，只不過是擦肩而過的幸福。
    </div>
</div>

查看DEMO

注意：子元素寬度爲100%時，右側會有一絲空白。

水平垂直居中

5.table-cell佈局

行內元素、單行、多行文字水平垂直居中。

<style>
    .element_box5 {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    .element_item5 {
        display: inline-block;
        width: 80%;
    }
</style>
<div class="element_box element_box5">
    <div class="element_item5">
        曾覺得真情會在你個人心間永駐，曾覺得一生都要愛下去。但終究，時光也會老去，人心也會變淡，走着走着便忘了曾經，想着想着便走錯了地方。有一天仍是要面對分離，面對這情深緣淺的現實；有一天咱們會分道楊鑣，變成了最熟悉的陌生人。
    </div>
</div>

查看DEMO

6.flex佈局

塊元素、行內元素、單行、多行文字水平垂直居中。

<style>
    .element_box6 {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .element_item6 {
        width: 80%;
    }
</style>
<div class="element_box element_box6">
    <div class="element_item6">
        《童年．花草記憶》一念花開，一念花落。這山長水遠的人世，終究是要本身走下去。人在旅途，要不斷的自我救贖。(桂花)
    </div>
</div>

查看DEMO

7.grid

<style>
    .element_box7 {
        display: grid;
    }
    .element_item7 {
        width: 80%;
        margin: auto;
    }
</style>
<div class="element_box element_box7">
    <div class="element_item7">
        來者要惜，去者要放。人生是一場旅行，不是全部人都會去同一個地方。路途的邂逅，老是美麗，分手的驛站，老是淒涼。無論喜與愁，該走的仍是要走，該來的終究會來。人生的旅程，大半是孤單。懂得珍惜，來的俱是美麗；捨得放手，走的不成負擔。對過去，要放；對如今，要惜；對未來，要信
    </div>
</div>

查看DEMO

8.position + 負margin

適用於固定大小的塊級元素，margin-left、margin-top爲元素寬、高的一半。

<style>
    .element_item8 {
        position: relative;
        top: 50%;
        left: 50%;
        width: 400px;
        height: 224px;
        margin-top: -112px;
        margin-left: -200px;
    }
</style>
<div class="element_box">
    <img class="element_item8" src="img/20190419141710_4735vxaqwhri_small.jpg" />
</div>

查看DEMO

9.position + calc()

適用於固定大小的塊級元素，calc計算50% - 元素寬或高的一半。

<style>
    .element_box9 {
        position: relative;
    }
    .element_item9 {
        position: absolute;
        top: calc(50% - 75px);
        left: calc(50% - 150px);
        width: 300px;
        height: 150px;
        overflow: hidden;
    }
</style>
<div class="element_box element_box9">
    <div class="element_item9">
        走得順時，沒必要太張狂，就算你爬到了坡頂，終究還要走下坡路；<br>
        走得快時，無須太得意，你的腳力老是有限的，不如放慢腳步把短暫的路走得精彩些；<br>
        走得累時，莫要太哀嘆，要知道歇一歇，經受了勞累，才知道堅強與珍惜；<br>
        走得苦時，切勿太悲愴，生活裏是沒有絕路的，苦難是人生的梯，助你走出低谷和沼澤。
    </div>
</div>

查看DEMO

10.position + margin: auto

<style>
    .element_box10 {
        position: relative;
        display: inline-block;
        width: 49%;
    }
    .element_item10 {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        height: auto;
    }
</style>
<div class="element_box element_box10">
    <img class="element_item element_item10" src="img/20190419141711_6640njffmwvi_small.jpg">
</div>
<div class="element_box element_box10">
    <img class="element_item element_item10" style="width: 150px;" src="img/c1647f58eed70de7fd7a19a63347d137.jpg">
</div>

查看DEMO

11.position + transform

<style>
    .element_box11 {
        position: relative;
        display: inline-block;
        width: 49%;
    }
    .element_item11 {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: auto;
    }
</style>
<div class="element_box element_box11">
    <img class="element_item element_item11" src="img/20190419141711_6640njffmwvi_small.jpg">
</div>
<div class="element_box element_box11">
    <img class="element_item element_item11" style="width: 150px;" src="img/c1647f58eed70de7fd7a19a63347d137.jpg">
</div>

查看DEMO

12.background

適用於圖片的居中。

<style>
    .element_box12 {
        background: url(img/20190419141711_9501mvvwvonf_small.jpg) no-repeat center;
        background-size: 80%;
    }
</style>
<div class="element_box element_box12"></div>

查看DEMO