假設有兩個盒子，不知道子盒子的寬高

  <div class="container">
    <div class="box"></div>
  </div>

要實現的效果如下：

第一種方法：

    .container {
      display: flex;
      justify-content: center;
      align-items: center;
    }

第二種：

    .container {
      position: relative;
    }

    .box
 
 {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

第三種：

    .container {
      position: relative;
    }

    .box {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }

第四種：

    .container
 
 {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }

    .box {
      display: inline-block;
    }

第四種方法會導致父元素四個方向上的margin失效。