CSS居中

水平居中

1.块级元素
元素自身
display：block
margin：0 auto
2.行内块级元素
父级
text-align：center
元素自身
display：inline-block

垂直居中
1.line-height：与元素高度一致
2.使用定位
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
3.flex布局
父级元素
display: flex;/flex布局/
justify-content: center;/使子项目水平居中/
align-items: center;/使子项目垂直居中/
4.table-cell布局
父级元素
display: table-cell;
vertical-align: middle;/使子元素垂直居中/
text-align: center;/使子元素水平居中/
子级元素
display: inline-block;
5.position transform 元素未知宽度
父级元素
position: relative;
子级元素
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);