摘要：前言居中布局，是前端頁面最常見的一種布局需求。下面將現今自己了解的居中布局方法作個小總結。水平居中行內元素在包含的父元素定義屬性為。垂直水平居中對于這個問題，可以綜合上述點進行實現。

居中布局，是前端頁面最常見的一種布局需求。剛開始學習前端時還是困擾了一段時間，后來看了Centering in CSS: A Complete Guide一文后才算掌握了方法。下面將現今自己了解的居中布局方法作個小總結。

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

水平居中

垂直居中

垂直水平居中

分別的，針對不同的元素類型，行內元素還是塊級元素，我們可以有不同的處理方法。這邊引用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。

.parent {
    text-align: center;
}

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

在當前元素設置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:

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

效果：

已知元素高度

絕對定位與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,使用偽元素居中方法。)

對于這個問題，可以綜合上述1、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%);
}

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

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可以輕松實現水平與垂直居中

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

使用table也具有良好的兼容性，但是table布局會帶來頁面重排性能的問題，所以一般都不采用。

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

使用CSS3的calc屬性，基于當前的頁面的布局計算尺寸。
兼容性：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

盤點8種CSS實現垂直居中水平居中的絕對定位居中技術

Absolute Horizontal And Vertical Centering In CSS

六種實現元素水平居中

第一篇技術文章，就寫到這里啦^_^。