Document

    .box {

      width: 500px;

      height: 500px;

      background-color: pink;

      /* 移动的时候可以写百分比，如果使用的百分比 参照盒子自身宽高移动 */

      /* transform: translateY(100%); */

    }

    .box1 {

      position: relative;

      width: 300px;

      height: 300px;

      background-color: pink;

    }

    .box2 {

      /* position: absolute;

      left: 50%;

      top: 50%;

      width: 100px;

      height: 100px;

      background-color: purple;

      transform: translate(-50%, -50%); */

    }

    /* 了解即可  */

    /* .box2 {

      position: absolute;

      left: 0;

      top: 0;

      bottom: 0;

      right: 0;

      width: 100px;

      height: 100px;

      background-color: purple;

      margin: auto;

    } */

    .box2 {

      position: absolute;

      left: 0;

      top: 0;

      bottom: 0;

      right: 0;

      width: 100px;

      height: 100px;

      background-color: purple;

      /* 左侧全部充满 */

      /* margin-left: auto; */

      /* 右侧全部充满 */

      /* margin-right: auto; */

      margin: auto;

    }