CSS那些事兒——居中佈局

時間 2019-12-10

標籤 css 那些事兒居中佈局欄目 CSS 简体版

原文原文鏈接

前言

居中佈局，是前端頁面最多見的一種佈局需求。剛開始學習前端時仍是困擾了一段時間，後來看了Centering in CSS: A Complete Guide一文後纔算掌握了方法。下面將現今本身瞭解的居中佈局方法做個小總結。css

概述

首先來看看居中佈局的需求分類：html

水平居中前端
垂直居中瀏覽器
垂直水平居中ide

分別的，針對不一樣的元素類型，行內元素仍是塊級元素，咱們能夠有不一樣的處理方法。這邊引用mdn的文檔簡單說明一下行內元素與塊級元素，有助於理解相應的實現原理。佈局

行內元素：一個行內元素只佔據它對應標籤的邊框所包含的空間。如a, img, span, button, input, label, select, textarea 等。
塊級元素：塊級元素佔據其父元素（容器）的整個空間. 如div, h1~6, p, form, table, ul, ol 等。性能

固然，對於上述類型的元素，咱們也能夠經過設置display: inline-block的方式使其變爲行內盒子，使用行內元素的方法進行居中。
下面，針對不一樣的佈局需求，分別總結一下相應的實現方式。注意，本文所述的行內元素爲display屬性爲inline或inline-block的元素。學習

水平居中

行內元素

在包含的父元素定義text-align屬性爲center。flex

.parent {
    text-align: center;
}

優勢：兼容性好，而且適用於多個inline-block元素在同一行進行居中，不用考慮各個元素的寬度問題。
瀏覽器兼容性：Allui

塊級元素

在當前元素設置margin-left與margin-right屬性爲auto。通常簡寫以下：

.child {
    margin: 0 auto;
}

此時的元素天然也是須要設定width屬性的，不然做爲塊級元素，它的寬度就是100%，並不須要進行居中了。
瀏覽器兼容性：All

垂直居中

行內元素

使用line-height
若是內容是單行的，那麼能夠在包含的父元素定義相同的height與line-height一致。
```
.parent {
    height: 20px;
    line-height: 20px;
    white-space: nowrap;
}
```
瀏覽器兼容性：All
使用padding
也可使用padding屬性進行居中，但使用狀況條件相對有限，受外層包含元素的高度影響。
```
.parent {
    padding-top: 20px;
    padding-bottom: 20px;
}
```
瀏覽器兼容性：All

利用僞元素
經過僞元素，使用vertical-align屬性進行對齊，這個方法比較巧妙，能夠用於上述方法不適用的場景。
瀏覽器兼容性：All
Html:

<div class="container">
    <p>If both of these techniques are out, you could employ the "ghost element" technique, in which a full-height pseudo element is placed inside the container and the text is vertically aligned with that.</p>
</div>

CSS:

.container {
    height: 200px;
    background-color: #aaa;
}
.container::before {
    content: "";
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
}
p {
    width: 300px;
    display: inline-block;
    vertical-align: middle;
}

效果：

塊級元素

已知元素高度

絕對定位與margin

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 0;
    height: 200px;
    margin-top: -100px;
}

瀏覽器兼容性：All

絕對定位方法

.parent {
    position: relative;
}
.child {
    position: absolute;
    height: 200px;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

此方法須要設定height屬性。瀏覽器兼容性：All。

未知高度
利用transform屬性
```
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
```
瀏覽器兼容性：IE9+
(但願兼容IE8？能夠考慮使用設置元素爲inline-block,使用僞元素居中方法。)

垂直水平居中

對於這個問題，能夠綜合上述一、2點進行實現。

行內元素

使用text-align與line-height屬性便可。

塊級元素

已知高度與寬度

使用absolute+margin方法。

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 200px;
    width: 200px;
    margin-top: -100px;
    margin-left: -100px;
}

絕對定位居中方法:

.parent {
    position: relative;
}
.child {
    position: absolute;
    height: 200px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

未知高度與寬度
使用transform方法：

.parent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

其餘居中方法

前三節中的方法是相對來講使用率較高的方法，而且有較好的兼容性。除此以外，還有一些方法也能夠實現居中。

使用float實現水平居中

Html:

<div class="container">
    <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
    </div>
</div>

CSS:

.container {
    background-color: #aaa;
    width: 600px;
    height: 200px;
    position: relative;
}
.parent {
    display: inline-block;
    position: relative;
    left: 50%;
    float: left;
    clear: left;
}
.child {
    background-color: #6aa;
    width: 100px;
    height: 100px;
    position: relative;
    right: 50%;
    float: left;
}

效果：

使用flex

不考慮兼容性的狀況下，flex能夠輕鬆實現水平與垂直居中

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

使用table

使用table也具備良好的兼容性，可是table佈局會帶來頁面重排性能的問題，因此通常都不採用。

.child {
    width: 100px;
    height: 100px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

使用calc計算屬性

使用CSS3的calc屬性，基於當前的頁面的佈局計算尺寸。
兼容性：IE9+
Html:

<div class="parent">
    <div class="child"></div>
</div>

CSS:

.parent {
    background-color: #aaa;
    width: 600px;
    min-height: 400px;
    position: relative;
}
.child {
    background-color: #ff2;
    width: 200px;
    height: 200px;
    position: absolute;
    top: calc(50% - 100px);
    left: calc(50% - 100px);
}

效果：