我們以一個(gè)面試題開始吧

請實(shí)現(xiàn)一個(gè)元素的水平居中顯示，不少于3種方法

這道題看似貌似很簡單，但是我們需要分析具體的場景，因?yàn)椴煌娘@示方式的使用利弊是不一樣的。

以下的討論都是子元素相對于其父元素的水平居中。垂直居中，以后會說到。

行內(nèi)元素的居中

常見的行內(nèi)元素有span img等，對這些元素居中設(shè)置，只需要在父元素的css中添加text-align:center即可。同樣它也對行內(nèi)塊元素也是有效的。
但是，有個(gè)缺點(diǎn)，由于text-align是可繼承屬性，即父元素內(nèi)部的所有元素都會繼承這個(gè)屬性，從而它的子元素內(nèi)部的文本都會居中顯示了。因此需要對子元素的文本居中方式單獨(dú)設(shè)定。

行內(nèi)元素的居中

塊級元素的居中

針對塊級元素的居中，我們將分為定寬和不定寬兩種情況來討論。

1.定寬
（1）子元素是正常流布局
若子元素的寬度是已知的，那么我們可以設(shè)置子元素的左右margin為auto即可

<div class="parent">
       <p class="child">我是子元素</p>
</div>

.parent{
    width: 500px;
    height: 100px;
    background-color: #eee;
}
.child{
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background-color: #82ab00;
}

塊級元素居中

行內(nèi)塊元素也算塊級元素，同樣適用
目前所有瀏覽器都是支持的

（2）子元素絕對定位布局(absolute)
如果子元素是絕對定位的，由于子元素此時(shí)是脫離文檔流，上面的方法就失效了。這時(shí)需要明確指出子元素的定位，四個(gè)方位均要指定。如下：

.parent{
    position: relative;   /*要指定父元素為relative，你懂的*/
    width: 500px;
    height: 100px;
    background-color: #eee;
}
.child{
    position: absolute;
    width: 100px;
    height: 50px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0 auto;
    background-color: #82ab00;
}

這樣也可以實(shí)現(xiàn)絕對定位元素的居中。原因可點(diǎn)擊這里。如果絕對定位子元素的margin為auto，你會發(fā)現(xiàn)它水平垂直居中了！此方法僅適用于IE8+瀏覽器中，IE7就掛了，不過你可以下面這個(gè)方法：

.child{
    position: relative;
    width: 100px;
    height: 50px;
    left: 50%;
    margin-left: -50px;
    background-color: #82ab00;
}

2.不定寬
不定寬元素如果要居中需要額外的輔助手段
（1）css3新特性transform
如果你對瀏覽器并沒有什么特別要求，那么可以使用css3提出的新屬性transform完成居中需求

.child-4{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: #82ab00;
}

這里需要子元素是絕對定位

（2）借助table元素
上面定寬元素設(shè)定左右margin為auto之所以可以居中，原因是左右margin會平分父元素剩下的空間。有個(gè)元素除外，那就是tabel元素。table有趣的地方在于它本身并不是塊級元素，如果不給它設(shè)定寬度的話，它的寬度由內(nèi)部元素的寬度“撐起”，但即使不設(shè)定它的寬度，僅設(shè)置margin-left:auto和margin-right:auto就可以實(shí)現(xiàn)水平居中。

       <div class="parent">
            <table class="table-wrap">
                <tbody>
                    <tr>
                        <td>
                            <div class="s-child">
                                我是子元素
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

.table-wrap{
    margin: 0 auto;
}

最大的缺點(diǎn)想必你也是知道，就是無關(guān)標(biāo)簽太多，加深了嵌套的層級，維護(hù)性很差。

（3）父元素使用float布局
這里需要多添加一層父元素，父子元素均float布局，之后設(shè)置position為relative，left為50%

<div class="parent-1">
    <div class="parent-float">
        <p class="child-float">我是子元素</p>
    </div>
</div>

.parent-1{
    width: 500px;
    height: 100px;
    margin-top: 50px;
    background-color: #eee;
}
.parent-float{
    float: left;
    clear: both;
    position: relative;
    left:50%;
    background-color: #999;
}
.child-float{
    float: left;
    position: relative;
    left: -50%;
}

缺點(diǎn)是你需要額外處理浮動(dòng)所帶來的一些問題。并且如果你設(shè)置了背景色，布局會有些混亂

父元素float布局混亂

以上是我對元素實(shí)現(xiàn)居中的一些方法，歡迎大家補(bǔ)充。

2017.6.11 晴
于上海浦東