页面布局中最常见的需求就是元素或者文字居中了，但是根据场景的不同，居中也有简单到复杂各种不同的实现方式。
CSS中文字居中显示的方式有以下五种：
1.使用text-align属性设置文本的对齐方式
将text-align属性值设置为center可以将文本居中显示。
.center {
text-align: center;
}
2.使用vertical-align属性设置元素的垂直对齐方式
将vertical-align属性值设置为middle可以将文本垂直居中显示。
.center {
vertical-align: middle;
}
3.使用line-height属性设置行高
将line-height属性值设置为比字体大小略大的值，可以使文本在容器中垂直居中显示。
.center {
line-height: 20px;
}
4.使用display
display: flex属性将父元素设置为弹性布局，并使用align-items: center属性将子元素在交叉轴上居中对齐。
.center {
display: flex;
align-items: center;
}
5.使用position
position: absolute属性和transform: translateY(-50%)将子元素相对于其父元素垂直居中对齐。
