flex布局

https://www.jianshu.com/p/3e10a27eabc7

4.纵向对齐方式align-items

使用align-items属性，可设置子元素纵向的对齐方式；

flex-start：顶部对齐
flex-end：底部对齐
center：居中
baseline：（未使用，暂不了解）
space-around：（未使用，暂不了解）

div居中布局

.dialogBox {
  position: relative;
  width: 100vw;
  height: 100vh;
  border-radius: size(10);
  opacity: 1;
  display: flex;
  flex-direction: column;

  .dialogContent {
    flex: 1;

    align-items: center;
    display: flex;

    justify-content: center;


    .box {
      height: 363px;
      width: 280px;
      background-color: blue;
    }
  }

  .dialogFooter {
    height: 4.8rem;
    background-color: #fff;
  }
}

<div class="dialogBox">
                <div className="dialogContent">

                  <div className="box">

                  </div>

                </div>
                <div className="dialogFooter">

                </div>
              </div>