水平垂直居中6种实现方案

1.flex布局

2.auto+absolute

3.absolute+定位

4.利用transform

 #wrap{
        width:300px;
        height:300px;
        background:yellow;
        position: relative;
    }
    #wrap .box{
        width: 200px;
        height: 200px;
        background-color: green;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }

}

5.flex+auto(最快，两行关键代码搞定)

  #wrap{
        width: 300px;
        height:300px;
        background: orange;
        display: flex;
    }  
    #wrap .box{
        width: 200px;
        height: 200px;
        background: green;
        margin: auto;

6.table-cell+inline(inline-block)项目中用的少

         #wrap{
        width:300px;
        height:300px;
        background:yellow;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
#wrap .box{
        width: 200px;
        height: 200px;
        background-color: pink;
        display: inline-block;
    }