摘要：前言居中布局，是前端頁(yè)面最常見(jiàn)的一種布局需求。下面將現(xiàn)今自己了解的居中布局方法作個(gè)小總結(jié)。水平居中行內(nèi)元素在包含的父元素定義屬性為。垂直水平居中對(duì)于這個(gè)問(wèn)題，可以綜合上述點(diǎn)進(jìn)行實(shí)現(xiàn)。

居中布局，是前端頁(yè)面最常見(jiàn)的一種布局需求。剛開(kāi)始學(xué)習(xí)前端時(shí)還是困擾了一段時(shí)間，后來(lái)看了Centering in CSS: A Complete Guide一文后才算掌握了方法。下面將現(xiàn)今自己了解的居中布局方法作個(gè)小總結(jié)。

首先來(lái)看看居中布局的需求分類(lèi)：

水平居中

垂直居中

垂直水平居中

分別的，針對(duì)不同的元素類(lèi)型，行內(nèi)元素還是塊級(jí)元素，我們可以有不同的處理方法。這邊引用mdn的文檔簡(jiǎn)單說(shuō)明一下行內(nèi)元素與塊級(jí)元素，有助于理解相應(yīng)的實(shí)現(xiàn)原理。

行內(nèi)元素：一個(gè)行內(nèi)元素只占據(jù)它對(duì)應(yīng)標(biāo)簽的邊框所包含的空間。如a, img, span, button, input, label, select, textarea 等。  
塊級(jí)元素：塊級(jí)元素占據(jù)其父元素（容器）的整個(gè)空間. 如div, h1~6, p, form, table, ul, ol 等。

當(dāng)然，對(duì)于上述類(lèi)型的元素，我們也可以通過(guò)設(shè)置display: inline-block的方式使其變?yōu)樾袃?nèi)盒子，使用行內(nèi)元素的方法進(jìn)行居中。
下面，針對(duì)不同的布局需求，分別總結(jié)一下相應(yīng)的實(shí)現(xiàn)方式。注意，本文所述的行內(nèi)元素為display屬性為inline或inline-block的元素。

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

.parent {
    text-align: center;
}

優(yōu)點(diǎn)：兼容性好，并且適用于多個(gè)inline-block元素在同一行進(jìn)行居中，不用考慮各個(gè)元素的寬度問(wèn)題。
瀏覽器兼容性：All

在當(dāng)前元素設(shè)置margin-left與margin-right屬性為auto。一般簡(jiǎn)寫(xiě)如下：

.child {
    margin: 0 auto;
}

此時(shí)的元素自然也是需要設(shè)定width屬性的，否則作為塊級(jí)元素，它的寬度就是100%，并不需要進(jìn)行居中了。
瀏覽器兼容性：All

使用line-height
如果內(nèi)容是單行的，那么可以在包含的父元素定義相同的height與line-height一致。

.parent {
    height: 20px;
    line-height: 20px;
    white-space: nowrap;
}

瀏覽器兼容性：All

使用padding
也可以使用padding屬性進(jìn)行居中，但使用情況條件相對(duì)有限，受外層包含元素的高度影響。

.parent {
    padding-top: 20px;
    padding-bottom: 20px;
}

瀏覽器兼容性：All

利用偽元素
通過(guò)偽元素，使用vertical-align屬性進(jìn)行對(duì)齊，這個(gè)方法比較巧妙，可以用于上述方法不適用的場(chǎng)景。
瀏覽器兼容性：All
Html:

    
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.

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

效果：

已知元素高度

絕對(duì)定位與margin

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

瀏覽器兼容性：All

絕對(duì)定位方法

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

此方法需要設(shè)定height屬性。瀏覽器兼容性：All。

未知高度
利用transform屬性

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

瀏覽器兼容性：IE9+
(希望兼容IE8？可以考慮使用設(shè)置元素為inline-block,使用偽元素居中方法。)

對(duì)于這個(gè)問(wèn)題，可以綜合上述1、2點(diǎn)進(jìn)行實(shí)現(xiàn)。

使用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;
}

絕對(duì)定位居中方法:

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

前三節(jié)中的方法是相對(duì)來(lái)說(shuō)使用率較高的方法，并且有較好的兼容性。除此之外，還有一些方法也可以實(shí)現(xiàn)居中。

Html:

    

        
1
        
2
    

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可以輕松實(shí)現(xiàn)水平與垂直居中

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

使用table也具有良好的兼容性，但是table布局會(huì)帶來(lái)頁(yè)面重排性能的問(wèn)題，所以一般都不采用。

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

使用CSS3的calc屬性，基于當(dāng)前的頁(yè)面的布局計(jì)算尺寸。
兼容性：IE9+
Html:

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

效果：

Centering in CSS: A Complete Guide

盤(pán)點(diǎn)8種CSS實(shí)現(xiàn)垂直居中水平居中的絕對(duì)定位居中技術(shù)

Absolute Horizontal And Vertical Centering In CSS

六種實(shí)現(xiàn)元素水平居中

第一篇技術(shù)文章，就寫(xiě)到這里啦^_^。