flex设置水平垂直居中

 .father {
    width: 400px;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: red;
  }
  .son {
    width: 200px;
    height: 200px;
    background-color: green;
    /*animation: move 2s 1 alternate ;*/
  }

<div class="father">
  <div class="son"></div>
</div>

在父元素设置display: flex;

.flex-direction调整主轴方向（默认为水平方向）

flex-direction: column 垂直排列

flex-direction: row 水平排列

 

justify-content调整主轴对齐（水平对齐）

 

lign-items调整侧轴对齐（垂直对齐）