如何使不定宽高的div在父元素中水平垂直居中

1、flex布局

  <div class="box">
      <div class="mask">
        <!-- 内容 -->
      </div>
    </div>

   /* css样式 */

     .box {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .mask {
        /* 样式 */
      }

2、position + transform

  <div class="box">
      <div class="mask">
        <!-- 内容 -->
      </div>
    </div>

   /* css样式 */

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

3、flex + margin

  <div class="box">
      <div class="mask">
        <!-- 内容 -->
      </div>
    </div>

    /* css样式 */

      .box {
        height: 100vh;
        display: flex;
      }
      .mask {
        margin: auto;
      }

注意：使用该方法必须保证父元素有高度。