1. margin設(shè)為auto

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

2. 使用text-align:center

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

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

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

<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垂直居中

通過display:table-cell 來把它模擬成一個表格單元格

<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'>佛系少女１谙选７不小！</div>
</div>  

為了考慮低版本IE BUG的問題怔球，我后來給子元素加上display: inline-block嚼酝。但是，

這種方法只能在IE8+竟坛、谷歌闽巩、火狐等瀏覽器上使用钧舌，IE6、IE7都無效

5. padding垂直居中

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

<style>
    .parent{
        padding: 20px 0;
    }
</style>
<div class='parent'>
    <div class='child'>佛系少女！Ｓ绾堋撞牢！</div>
</div>  

6. 用絕對定位居中

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

絕對定位進(jìn)行居中的原理是通過把這個絕對定位元素的left或top的屬性設(shè)為50%,這個時候元素并不是居中的外构，而是比居中的位置向右或向左偏了這個元素寬度或高度的一半的距離普泡，所以需要使用一個負(fù)的margin-left或margin-top的值來把它拉回到居中的位置，這個負(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. 另一種絕對定位居中

看到這種方法的時候覺得滿神奇的，同樣也是那些我們已經(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必須配對出現(xiàn)來控制垂直方向*/
        left:0;
        right: 0;
        /*left與right必須配對出現(xiàn)來控制水平方向*/
        margin: auto;/*這句不能少*/
    }
</style>
<div class='parent'>
    <div class='child'></div>
</div>  

8. flex布局居中

flex布局感覺挺火的，就稍微學(xué)了下件炉。
關(guān)于flex布局的解釋：一種CSS3的布局模式勘究，也叫做彈性盒子模型。
實現(xiàn)一個div盒子水平垂直居中：不需要絕對定位斟冕。只需要通過對伸縮容器定義兩個屬性口糕，justify-content定義伸縮項目沿著主軸線的對齊方式為center， align-items定義伸縮項目在側(cè)軸（垂直于主軸）的對齊方式為center磕蛇。對于行內(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>