水平垂直居中

display: flex; align-content

display: flex; justify-content: center; align-items: center; 居中对齐 {justify-content: flex-start;}：左上角 {justify-content: center;}：顶部居中 {justify-content: flex-end;}：右上角 {justify-content: flex-start; align-items: center;}：靠左垂直居中 {justify-content: center; align-items: center;}：垂直水平居中 {justify-content: flex-end; align-items: center;}：靠右垂直居中 {justify-content: flex-start; align-items: flex-end;}：左下角 {justify-content: center; align-items: center;}：底部水平居中 {justify-content: flex-end; align-items: flex-end;}：右下角

display: flex; align-items: center; 单个垂直居中对齐 flex-start：靠交叉轴开始对齐 flex-end：靠交叉轴结束对齐 center：交叉轴居中对齐 baseline：项目文本第一行基线对齐 stretch（默认）：如果项目未设置高度或设为auto，将占满整个容器的高度;

display: flex; justify-content: center; 单个水平居中 flex-start（默认）: 靠主轴开始位置 flex-end：主轴结束位置 center：水平居中 space-between：两端分布 space-around：两端分布但有两端有间隔;

display: table 两列，一列高度随另一列变化