css布局：各种居中

1. margin设为auto

此方法只能进行水平居中，且对浮动元素或绝对定位元素无效。

2. 使用text-align:center

只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE6、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的。

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

对于单行文本的垂直居中，把文字的line-height设为文字父容器的高度。注意：适用于只有一行文字的情况。
对于一张图片的垂直居中。

<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. 用绝对定位居中

此法只适用于那些我们已经知道它们的宽度或高度的元素。

绝对定位进行居中的原理是通过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的，而是比居中的位置向右或向左偏了这个元素宽度或高度的一半的距离，所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置，这个负的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. 另一种绝对定位居中

看到这种方法的时候觉得满神奇的，同样也是那些我们已经知道它们的宽度或高度的元素。但遗憾的是它只支持IE9+,谷歌，火狐等符合w3c标准的现代浏览器

<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必须配对出现来控制垂直方向*/
        left:0;
        right: 0;
        /*left与right必须配对出现来控制水平方向*/
        margin: auto;/*这句不能少*/
    }
</style>
<div class='parent'>
    <div class='child'></div>
</div>

8. flex布局居中

flex布局感觉挺火的，就稍微学了下。
关于flex布局的解释：一种CSS3的布局模式，也叫做弹性盒子模型。
实现一个div盒子水平垂直居中：不需要绝对定位。只需要通过对伸缩容器定义两个属性，justify-content定义伸缩项目沿着主轴线的对齐方式为center， align-items定义伸缩项目在侧轴（垂直于主轴）的对齐方式为center。对于行内标签也可以。

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