子盒子在父盒子水平垂直居中的方法

1.设置父盒子上边框，避免外边距塌陷问题。设置水平方向margin为auto，让子盒子在父盒子上水平居中；垂直方向margin移动父盒子高度的一半减去1像素。子盒子垂直方向移动自身高度的一半。

<style>
    .father {
      width: 500px;
      height: 500px;
      background-color: skyblue;

      //给父盒子设置1px 透明边框，避免外边距塌陷
      border-top: 1px solid transparent;
    }

    .son {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: 249px auto;
      transform: translateY(-50%);
    }
</style>

2.使用flex布局实现

.father {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 500px;
    height: 500px;
    background-color: skyblue;
}

.son {
    width: 200px;
    height: 200px;
    background-color: pink;
}

3. 定位实现

.father {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: skyblue;
}

.son {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background-color: pink;
}