一、水平居中
1.行内元素居中（文字/图片）
在父元素上加上text-align:center;
2.块级元素居中
设置宽度，设置margin:0 auto;
二、垂直居中
1.行内元素（块级容器高度由内容撑开）
上下padding相等
2.块级元素（水平垂直居中）
{
position:absolute;
left:50%;
top:50;
transform: translate(-50%,-50%);
}
3.vertical-align （图片在容器垂直居中）
vertical-align: middle可以使得行内元素/表格在父容器内中线对齐（可用于将同一行的不同大小的字体垂直居中）
垂直居中的办法：
.box :before { content : ''; display : inline-block; height : 100%; vertical-align: middle; } .box : img { vertical-align: middle; }
- 使用table-cell
display : table-cell;
vertical-align: middle;
- 使用 display : flex
display : flex;
align-items : center; /* 垂直居中 */
justify-content : center; /* 水平居中 */
