更多关于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;
}