百分比方式实现居中效果

给父盒子设置"position: relative;"相对定位，给子盒子设置"position: absolute;"绝对定位。使用"left: 50%;"和"top: 50%;"让子盒子距离父盒子左边和顶部距一半的距离，此时由于子盒子的左边框和上边框在父盒子的中间线处，所以需要退回子盒子一半距离的，可以使用"transform: translate(-50%,-50%);"来实现。

总结一下：

父盒子设置：

父盒子 {
    position: relative;
    width: 100vw;    /* 这里只是举个例子。width和height   
    height: 100vh;    的数值根据实际需求进行设置 */
}

子盒子设置：

子盒子 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}