css使用flex使垂直居中或者水平居中

垂直居中

display: flex;
justify-content: center;
align-items: center;
flex-direction: column;

水平居中

display: flex;
justify-content:space-between;
align-items: center;

display: flex; 弹性盒子由弹性容器
justify-content 属性（水平）对齐弹性容器的项目，当项目不占用主轴上所有可用空间时。

提示：请使用 align-items 属性 属性垂直对齐项目。
flex-direction: column;灵活的项目将垂直显示，正如一个列一样。