方法一：使用Flexbox布局

Flexbox是CSS3中引入的一种布局模式，它可以轻松实现元素的居中对齐。通过设置容器的 display 属性为 flex，并使用 justify-content 和 align-items 属性分别设置子元素沿主轴和侧轴的对齐方式，可以实现内容的垂直居中。

.container {

display: flex;

justify-content: center;

align-items: center;

}

方法二：使用vertical-align属性（仅适用于行内元素）

vertical-align 属性可以应用于行内元素，通过设置该属性为 middle，可以实现元素内容的垂直居中。

.container {

display: inline-block;

}

.container span {

vertical-align: middle;

}

方法三：使用绝对定位和transform属性

通过将子元素设置为绝对定位，并在父容器上应用相对定位，可以使用 top 和 transform 属性来实现子元素的垂直居中。

.container {

position: relative;

}

.container span {

position: absolute;

top: 50%;

transform: translateY(-50%);

}

方法四：使用table布局

将父容器的 display 属性设置为 table，子元素设置为 table-cell，可以通过 vertical-align 属性实现内容的垂直居中。

.container {

display: table;

}

.container span {

display: table-cell;

vertical-align: middle;

}

方法五：使用line-height属性（只适用于单行文本）

如果需要垂直居中的是单行文本，可以使用 line-height 属性来实现。将 line-height 的值设置为和容器高度相等的数值，可以使文本在容器中垂直居中。

.container {

line-height: 100px; /* 假设容器高度为100px */

}

结论

以上所介绍的五种方法都可以实现