前言

CSS垂直居中是指在一个容器中，让其中的某个子元素垂直居中显示。比如在一个div容器中，我们要让其中的文本内容垂直居中，则可以采用各种CSS技巧来实现这一目标。

实现垂直居中需要考虑的方面比较多，例如要考虑文本的行高、字体大小、文本的长度是否超过容器等等。然而，我们可以采用一些CSS技术（如flexbox布局、vertical-align属性、绝对定位等）来实现垂直居中。

以下列出一些比较常见的方式：

1. 使用flexbox布局

在父容器上添加display: flex和align-items: center属性，即可将子元素垂直居中。

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.item {
    width: 50%;
}

2. 使用table-cell实现

将父容器的display属性设置为table，将要居中的子元素的display属性设置为table-cell，然后设置垂直居中即可。

.container {
    display: table;
    height: 100vh;
}

.item {
    display: table-cell;
    vertical-align: middle;
}

3. 绝对定位和transform属性

将要居中的子元素设置为绝对定位，然后将top和left两个位置属性都设置为50%，再使用transform属性将子元素向上或向左偏移自身高度（或宽度）的一半，即可实现垂直或水平居中。

.container {
    position: relative;
    height: 100vh;
}

.item {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

结语

以上是一些实现CSS垂直居中的方法，具体选择哪种方法，大家可以根据自己的使用场景和业务来决定。