1、如何实现盒子水平垂直居中？

1. 父盒子开启flex布局，并设置主轴居中、侧轴居中

.dad{
    display: flex;
}
.son{
    justify-content: center;
    align-items: center;
}

2. 父盒子开启flex布局；子盒子设置外边距自适应

.dad{
    display: flex;
}
.son{
    margin: auto;
}

3. 子绝父相；子盒子设置top、left为50%，利用transform基于自身-50%

.dad{
    position: relative;
}
.son{
    position: absolute;
    top: 50%;
    left: 50%;
    tranform: translate(-50%, -50%);
}

4. 子绝父相；子盒子设置上右下左均为0，外边距自适应

.dad{
    position: relative;
}
.son{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}