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中垂直居中的實現方法還是很多的，開發者們可以根據實際情況來選擇適合自己的方法。