盒子水平居中垂直居中6种方法

 .box1 {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
    }
    .one {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -25px;
      margin-top: -25px;
      width: 50px;
      height: 50px;
      background-color: cyan;
    }
    .box2 {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
    }
    .two {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      width: 50px;
      height: 50px;
      background-color: cyan;
    }
    .box3 {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
    }
    .three {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 50px;
      height: 50px;
      background-color: cyan;
    }
    .box4 {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
    }
    .four {
      width: 50px;
      height: 50px;
      background-color: cyan;
    }
    .box5 {
      /* display:table-cell; 表示将元素设置为表格单元格的显示方式。这个属性通常用于实现表格布局，可以让元素像表格一样排列，可以设置垂直居中、水平居中等效果。 */
      /* 父盒子给 display: table-cell; vertical-align: middle;  text-align: center; */
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
    }
    .five {
      /* 子盒子转行内块 */
      display: inline-block;
      width: 50px;
      height: 50px;
      background-color: cyan;
    }
    .box6 {
      /* 防止塌陷 */
      overflow: hidden;
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
    }
    .six {
      width: 50px;
      height: 50px;
      /* 子盒子给左外边距和上外边距,计算的距离为 父盒子一半减去子盒子的一半 */
      margin-left: 75px;
      margin-top: 75px;
      background-color: cyan;
    }
```html
<div class="box1">
    <div class="one"></div>
  </div>
  <div class="box2">
    <div class="two"></div>
  </div>
  <div class="box3">
    <div class="three"></div>
  </div>
  <div class="box4">
    <div class="four"></div>
  </div>
  <div class="box5">
    <div class="five"></div>
  </div>
  <div class="box6">
    <div class="six"></div>
  </div>