纯CSS实现垂直水平居中

html结构：

        垂直水平居中

CSS:

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

方法1：display:flex

.box1{
    display: flex;
    justify-content:center;
    align-items:Center;
}

方法2：table-cell

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

效果图：