css设置div元素居中

HTML中创建网站时，有时我们需要某些元素垂直对齐在框内。可能是将文本或图像在 div 内部中间对齐，或者垂直对齐。

CSS flexbox垂直居中 div 文本 (推荐)

首先，设置div属性为flex，其次设置子元素align-items: center。
html示例：

flexbox垂直居中 div 文本。

div {
display: flex;
justify-content: center; /* align horizontal /
align-items: center; / align vertical */
border: 5px solid;
padding: 10px;
}

CSS table-cell 和 vertical-align垂直居中 div 文本

可以通过设置外部标签和内部标签来垂直对齐文本。display: table; 和display: table-cell
html示例：

table-cell 和 vertical-align垂直居中 div 文本。

div {
display: table;
height: 60px;
width: 100%;
border: 5px solid;
text-align: center;
}
span {
display: table-cell;
vertical-align: middle;
padding: 10px;
}

CSS line-height 和 vertical-align垂直对齐div单行文本

单行文本垂直对齐时，此方法很有用。需要在 CSS 中设置相同的 line-height、height 和 vertical-align。
html示例:

line-height 和 vertical-align垂直对齐div单行文本。

div {
height: 60px;
line-height: 60px;
border: 5px solid;
text-align: center;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}