垂直水平居中的几种办法

固定宽高

1、定位 + margin-top + margin-left

.container{
    position:relative;
    height:300px;
    width:300px;
}
.container .box{
    position:absolute;
    width:200px;
    height:100px;
    left:50%;
    top:50%;
    margin-top:-100px;
    margin-left:-50px;
}

2、定位 + margin:auto
.container{
    position:relative;
    height:300px;
    width:300px;
}
.container .box{
    position:absolute;
    width:200px;
    height:100px;
    left:0px;
    top:0px;
    right:0px;
    bottom:0px;
    margin:auto;
}

未知宽高

1、transform
.box{
    position:relative;
    left:50%;
    top:50%;
    transform:(-50%,-50%);两个-50%都是相对于自身宽高计算
}

2、flexbox
.container{
    display:flex;
    justify-content:center;
    align-items:center;
}


3、display:table-cell
.container{
    position:relative;
    display:table;
    width:300px;
    height:300px;
    border:1px solid red;
}
.container .box{
    display:table-cell;
    text-align:center;
    vetical-align:center
}