在网页布局中元素水平居中比元素垂直居中要简单不少，同时实现水平居中和垂直居中往往是最难的。现在是响应式设计的时代，我们很难确切的知道元素的准确高度和宽度，所以一些方案不大适用。据我所知, 在CSS中至少有五种实现居中的方法。我将使用下面的HTML结构从简单到复杂开始讲解:
1.使用text-align属性设置文本的对齐方式
将text-align属性值设置为center可以将文本居中显示。
2.使用vertical-align属性设置元素的垂直对齐方式
将vertical-align属性值设置为middle可以将文本垂直居中显示。
3.使用line-height属性设置行高
将line-height属性值设置为比字体大小略大的值，可以使文本在容器中垂直居中显示。
4.使用display
display: flex属性将父元素设置为弹性布局，并使用align-items: center属性将子元素在交叉轴上居中对齐。
5.使用position
position: absolute属性和transform: translateY(-50%)将子元素相对于其父元素垂直居中对齐。
