CSS で垂直方向と水平方向の中央揃えを行う 6 つの方法を共有します

.div { 
    width: 200px;
    height: 200px;
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
}

.div{
    position: absolute;
    left: 30%;
    right:30%;
    top: 25%;
    bottom:25%;
}

.wrap{
    width:200px;//也可以不写，默认占总宽度的50%
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}

.wrap{//外层容器
    display: table;
}
.div{//内层容器
    display: table-cell; 
    vertical-align: middle; 
}

.wrap{
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;   
}