Flex 布局实现元素的垂直居中和水平居中

更多关于flex布局可以参考这篇博文：https://blog.csdn.net/qq_34803821/article/details/85139315

---

使用flex实现元素的水平居中和垂直居非常方便

水平居中：

.box{
    display: flex;
    justify-content: center;
}

垂直居中

    .box {
      display: flex;
      align-items: center;
    }

水平垂居中

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