CSS中的垂直居中一直是前端开发者们所面临的难题，特别是在一些布局比较复杂的情况下，更是让人头痛。然而，我们还是可以通过一些方法来实现元素在竖直方向上的居中。下面就让我们一起来看看吧。

首先，我们来谈谈最常用的方法——使用display:table和display:table-cell。具体做法如下：

.parent {
display: table;
height: 200px; /*父元素高度*/
width: 100%; /*父元素宽度*/
}
.child {
display: table-cell;
text-align: center;
vertical-align: middle;
}

代码很简单，我们将父元素的display属性设置为table，再设置高度和宽度等相应的属性。然后将子元素的display属性设置为table-cell，同时使用text-align:center和vertical-align:middle属性来实现子元素在竖直方向上的居中。但是需要注意的是，将父元素的display属性设置为table，可能会对其他CSS属性产生一些影响，因此要慎重考虑。

接下来，我们说说第二种方法——使用flex布局。具体做法如下：

.parent {
display: flex;
align-items: center;
justify-content: center;
height: 200px; /*父元素高度*/
width: 100%; /*父元素宽度*/
}
.child {
text-align: center;
}

同样的，这种方法的代码也很简单，我们只需将父元素的display属性设置为flex，再设置align-items: center和justify-content: center属性。这样，子元素就可以实现在竖直方向上的居中了。同时我们再使用text-align:center属性来使子元素在水平方向上居中。

最后，我们谈谈第三种方法——使用绝对定位。具体做法如下：

.parent {
position: relative;
height: 200px; /*父元素高度*/
width: 100%; /*父元素宽度*/
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
}

这种方法也很常用，我们只需将父元素的position属性设置为relative，然后将子元素的position属性设置为absolute，并使用top、transform属性来实现元素在竖直方向上的居中。同时我们同样使用text-align:center属性来使子元素在水平方向上居中。

综上所述，我们可以看到CSS中垂直居中的实现方法还是很多的，开发者们可以根据实际情况来选择适合自己的方法。