水平居中：
- 行内元素居中
text-align: center; - 定宽块级元素居中
width: 300px;
margin: 0 auto; - 不定宽块级元素居中
- display:table;
margin:0 auto;- position: relative;
left: 50%; //将div边界浮动到50%
垂直居中：
- 定高单行文本
height: 100px;
line-height: 100px; - 定高多行文本等
- height: 200px; //随意高度
position: absolute;
top: 0;
bottom:0;
left: 0;
right: 0;
margin: auto;- height:200px;
position:absolute;
top:50%;
margin-top: -100px;
- 不定高
display: flex;
justify-content: center;
align-items: center;
垂直水平居中：
- 不定高宽
父：
position: relative;
子：
transform: translate(-50%,-50%);
position: absolute;
top: 50%;
left: 50%; - 不定高宽
display: flex;
justify-content: center;
align-items: center;
