css 居中布局

1. 方法一：absolute+transform（定位+动画translate）

/* 方法一：absolute+transform */
    .father {
      /* 给父盒子设置相对定位 */
      position: relative;
      width: 500px;
      height: 500px;
      /* 让父盒子水平居中 */
      margin: 0 auto;
      border: 2px solid #000;
    }

    .son {
      /* 子盒子设置绝对定位 */
      position: absolute;
      /* 向右、向下移动父盒子的一半 （偏移量） */
      left: 50%;
      top: 50%;
      /* 向左移动自身宽的一半，向上移动自身盒子高的一半 */
      width: 200px;
      height: 300px;
      /* 出处：css translate动画； 说明：translate若使用百分比，是相对于自身的比例的位移 “-”负号向左上角位移 */
      transform: translate(-50%, -50%);
      background-color: pink;
    }

2、方法二：弹性盒居中布局（比较灵活，代码多，注意弹性盒兼容问题，建议使用）

/* 方法二：弹性盒居中布局 */
    .father {
      /* 设置为弹性盒 */
      display: flex;
      /* 设置主轴的对齐方式 */
      justify-content: center;
      /* 设置辅轴的对齐方式 */
      align-items: center;
      width: 500px;
      height: 500px;
      /* 让父盒子水平居中 */
      margin: 0 auto;
      border: 2px solid #000;
    }

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

3、方法三：绝对定位法（比较灵活，代码多，兼容性好，建议使用）

/* 方法三：绝对定位法 */
    .father {
      /* 父盒子设置相对定位 */
      position: relative;
      width: 500px;
      height: 500px;
      /* 让父盒子水平居中 */
      margin: 0 auto;
      border: 2px solid #000;
    }

    .son {
      /* 子盒设置绝对定位 */
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
      width: 100px;
      height: 300px;
      background-color: pink;
    }

4、方法四：负margin居中法（需要计算宽高，不建议使用）

/* 方法四：负margin居中法 */
    .father {
      /* 父盒子设置相对定位 */
      position: relative;
      width: 500px;
      height: 500px;
      /* 让父盒子水平居中 */
      margin: 0 auto;
      border: 2px solid #000;
    }

    .son {
      /* 子盒设置绝对定位 */
      position: absolute;
      /* 子盒向右位移父盒宽度的一半像素 */
      top: 50%;
      /* 子盒向下位移父盒高度的一半像素 */
      left: 50%;
      /* 子盒向上位移自身高的一半像素 */
      margin-top: -150px;
      /* 子盒向左位移自身宽的一半像素 */
      margin-left: -50px;
      width: 100px;
      height: 300px;
      background-color: pink;
    }

5、不确定宽高定位（比较灵活，代码多，兼容性好，建议使用）

/* 方法五：负margin居中法 */
    .father {
      /* 父盒子设置相对定位 */
      position: relative;
      width: 500px;
      height: 500px;
      /* 让父盒子水平居中 */
      margin: 0 auto;
      border: 2px solid #000;
    }

    .son {
      /* 子盒设置绝对定位 */
      position: absolute;
      left: 25%;
      right: 25%;
      top: 25%;
      bottom: 25%;
      margin: auto;
      width: 100px;
      height: 300px;
      background-color: pink;
    }

（ps：内容来源：参考前辈大佬；主要作为笔记使用，欢迎各位大佬纠正指导，欢迎沟通交流；）