在CSS中，要讓一個元素在垂直方向上居中，主要有兩種方法：

方法一：將元素的高度計算出來，通過設置元素的上下邊距（margin）來使其垂直居中。具體實現代碼如下：

.element {
height: 200px; /* 設置元素高度 */
margin: auto 0; /* 上下邊距設置為auto，即自動計算 */
}

方法二：使用 flexbox 彈性布局來實現。具體實現代碼如下：

.parent {
display: flex; /* 開啟彈性布局 */ 
align-items: center; /* 垂直居中設置 */
}

這兩種方法各有優劣。

方法一的優點是兼容性好，支持絕大部分瀏覽器。但是缺點是當元素高度不確定時，無法實現垂直居中。此外，如果元素內部有多個元素需要垂直居中，就需要手動計算和設置每個元素的高度，而且代碼量較大。

方法二的優點是實現簡單，代碼量小，垂直居中效果顯著，而且也支持設置多個元素垂直居中。缺點是其兼容性仍有待提高，老版本瀏覽器可能不支持。

總的來說，選擇哪種方法取決于具體情況，如果目標瀏覽器較新，且元素高度確定，可以優先考慮使用 flexbox 彈性布局實現垂直居中。