水平居中，垂直居中，水平垂直居中

整理了一下各种居中

水平居中

    1.行内元素：父元素设置text-align:center;

    2.定宽块状元素:margin:0 auto;

    3.不定宽块状元素

            a.使用table，margin：auto；将需要设置的元素加入table

            b.display:inline;然后设置text-align:center;但无法设置宽高

            c.父元素设置：position：relative；left:50%;

                子元素设置：position：relative;left：-50%；

垂直居中

a.height：line-height；

<div class="vertical">content</div>

.vertical {
    height: 100px;
    line-height: 100px;/*值等于元素高度的值*/
}

b.使用绝对定位

.vertical {
    height: 100px;/*元素的高度*/
    position: absolute;
    top: 50%;/*元素的顶部边界离父元素的的位置是父元素高度的一半*/
    margin-top: -50px;/*设置元素顶边负边距，大小为元素高度的一半*/
}

 c.先设置display：table-cell；再设置vertical-align：middle；

包含的块元素

<div id="container">
    <div id="content">content</div>
</div>

#container {
    height: 300px;
    display: table;/*让元素以表格形式渲染*/
}
#content {
    display:table-cell;/*让元素以表格的单元素格形式渲染*/
    vertical-align: middle;/*使用元素的垂直对齐*/
}

包含的是行内元素

<div class="box box1">
        <span>垂直居中</span>
</div>

.box1{
    display: table-cell;
    vertical-align: middle;
    text-align: center;        
}

水平垂直居中

#son{
    height:100px;
    width:100px;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate（-50%，-50%）;
}

#son{
    height:100px;
    width:100px;
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    right:0;
    margin:auto;
}

#container{
    display:flex;
    justify-content:center;
    align-items:center;
}