1. margin設(shè)為auto

此方法只能進(jìn)行水平居中，且對(duì)浮動(dòng)元素或絕對(duì)定位元素?zé)o效。

2. 使用text-align:center

只能對(duì)圖片，按鈕，文字等行內(nèi)元素(display為inline或inline-block等)進(jìn)行水平居中。但要說(shuō)明的是在IE6、7這兩個(gè)奇葩的瀏覽器中，它是能對(duì)任何元素進(jìn)行水平居中的。

3. 使用line-height單行文本垂直居中

對(duì)于單行文本的垂直居中，把文字的line-height設(shè)為文字父容器的高度。注意：適用于只有一行文字的情況。
對(duì)于一張圖片的垂直居中。

<style>
    div{
        width:300px;
        height:300px;
        border: 1px solid #ccc;
        line-height: 300px;
    }
    div img{
        vertical-align: middle;
    }
</style>
<div>
    <img src="img/logo.png" alt=""/>
</div>  

4. 使用display:table-cell搭配vertical-algin:middle垂直居中

通過(guò)display:table-cell 來(lái)把它模擬成一個(gè)表格單元格

<style>
    .parent{
        width:300px;
        height:300px;
        border: 1px solid #ccc;
        display:table-cell;
        vertical-align: middle;
    }
    .child{
        display: inline-block;
    }
</style>
<div class='parent'>
    <div class='child'>佛系少女！?。?lt;/div>
</div>  

為了考慮低版本IE BUG的問(wèn)題，我后來(lái)給子元素加上display: inline-block。但是，

這種方法只能在IE8+、谷歌、火狐等瀏覽器上使用，IE6、IE7都無(wú)效

5. padding垂直居中

padding-top與padding-bottom值相等，子元素上下間距相等也可以垂直居中。

<style>
    .parent{
        padding: 20px 0;
    }
</style>
<div class='parent'>
    <div class='child'>佛系少女?。?！</div>
</div>  

6. 用絕對(duì)定位居中

此法只適用于那些我們已經(jīng)知道它們的寬度或高度的元素。

絕對(duì)定位進(jìn)行居中的原理是通過(guò)把這個(gè)絕對(duì)定位元素的left或top的屬性設(shè)為50%,這個(gè)時(shí)候元素并不是居中的，而是比居中的位置向右或向左偏了這個(gè)元素寬度或高度的一半的距離，所以需要使用一個(gè)負(fù)的margin-left或margin-top的值來(lái)把它拉回到居中的位置，這個(gè)負(fù)的margin值就取元素寬度或高度的一半。

<style>
    .parent{
        width:300px;
        height:300px;
        border: 1px solid #ccc;
        position:relative;
    }
    .child{
        width:100px;
        height:100px;
        border: 1px solid #ccc;
        position: absolute;
        top:50%;
        left:50%;
        margin-top: -50px;
        margin-left: -50px;
    }
</style>
<div class='parent'>
    <div class='child'></div>
</div>  

7. 另一種絕對(duì)定位居中

看到這種方法的時(shí)候覺(jué)得滿神奇的，同樣也是那些我們已經(jīng)知道它們的寬度或高度的元素。但遺憾的是它只支持IE9+,谷歌，火狐等符合w3c標(biāo)準(zhǔn)的現(xiàn)代瀏覽器

<style>
    .parent{
        width:300px;
        height:300px;
        border: 1px solid #ccc;
        position:relative;
    }
    .child{
        width:100px;
        height:100px;
        border: 1px solid #ccc;
        position: absolute;
        top:0;
        bottom: 0;
        /*top與bottom必須配對(duì)出現(xiàn)來(lái)控制垂直方向*/
        left:0;
        right: 0;
        /*left與right必須配對(duì)出現(xiàn)來(lái)控制水平方向*/
        margin: auto;/*這句不能少*/
    }
</style>
<div class='parent'>
    <div class='child'></div>
</div>  

8. flex布局居中

flex布局感覺(jué)挺火的，就稍微學(xué)了下。
關(guān)于flex布局的解釋：一種CSS3的布局模式，也叫做彈性盒子模型。
實(shí)現(xiàn)一個(gè)div盒子水平垂直居中：不需要絕對(duì)定位。只需要通過(guò)對(duì)伸縮容器定義兩個(gè)屬性，justify-content定義伸縮項(xiàng)目沿著主軸線的對(duì)齊方式為center， align-items定義伸縮項(xiàng)目在側(cè)軸（垂直于主軸）的對(duì)齊方式為center。對(duì)于行內(nèi)標(biāo)簽也可以。

<style>
    .parent{
        width:300px;
        height:300px;
        border: 1px solid #ccc;
        display: flex;
        justify-content:center;
        align-items:center;
    }
</style>
<div class='parent'>
    <span>佛系少女?。?！</span>
</div>