是什么

让元素的内容（文字或者图片）在水平、垂直方向都居中

怎么用

• 定位 + margin:auto
• 定位 + 自身一半 (定宽)
• 定位 + transform
• flex
• table
• grid

原理

• 定位 + margin:auto

<style>
    .parent{
      width: 200px;
      height: 200px;
      border: 1px solid #ddd;
      position: relative;
    }
    .child{
      width: 100px;
      height: 100px;
      border: 1px solid #f43;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
  </style>
  <div class="parent">
    <div class="child"></div>
  </div>

• 定位 + 自身一半

  <style>
    .parent2{
      width: 200px;
      height: 200px;
      border: 1px solid #ddd;
      position: relative;
    }
    .child2{
      width: 100px;
      height: 100px;
      border: 1px solid #f43;
      position: absolute;
      /* 易漏点 */
      left: 50%;
      top:50%;
      margin-left:-50px;
      margin-top: -50px;
    }
  </style>
  <div class="parent2">
    <div class="child2"></div>
  </div>

• 定位 + transform

  <style>
    .parent3{
      width: 200px;
      height: 200px;
      border: 1px solid #ddd;
      position: relative;
    }
    .child3{
      width: 100px;
      height: 100px;
      border: 1px solid #f43;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
    }
  </style>
  <div class="parent3">
    <div class="child3"></div>
  </div>

• flex

  <style>
    .parent4{
      width: 200px;
      height: 200px;
      border: 1px solid #ddd;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .child4{
      width: 100px;
      height: 100px;
      border: 1px solid #f43;
    }
  </style>
  <div class="parent4">
    <div class="child4"></div>
  </div>

• table

<style>
    .parent5{
      width: 200px;
      height: 200px;
      border: 1px solid #ddd;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
    .child5{
      width: 100px;
      height: 100px;
      border: 1px solid #f43;
      /* 必须也要设置display */
      display: inline-block; 
    }
  </style>
  <div class="parent5">
    <div class="child5"></div>
  </div>

• grid

  <style>
    .parent6{
      width: 200px;
      height: 200px;
      border: 1px solid #ddd;
      display: grid;
      justify-content: center;
      align-items: center;
    }
    .child6{
      width: 100px;
      height: 100px;
      border: 1px solid #f43;
    }
  </style>
  <div class="parent6">
    <div class="child6"></div>
  </div>