关于居中
水平居中
1.内联元素水平居中 .center { text-align: center;}
2.块级元素水平居中 .center-me {margin: 0 auto;}
垂直居中
1.单行内联元素
.link {padding-top: 30px;
padding-bottom: 30px;}
不能包裹的文本进行居中，使line-height高度等于center文本。
.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap;
}
2.多行内敛元素
添加 {vertical-align: middle;}
3.table-like不能用时用flexbox
.flex-center-vertically {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}
4.知道高度的块级元素
.parent {position: relative;}
.child {position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;}
5. 未知高度的块级元素
.parent {position: relative;}
.child { position: absolute;
top: 50%;
transform: translateY(-50%);}
6. flexbox
.parent { display: flex;
flex-direction: column;
justify-content: center;}
使用网格进行居中
body, html { height: 100%;
display: grid;}
span { margin: auto;}
