在 CSS 中實現垂直方向居中是一個常見的問題。在這篇文章中，我們將探討幾種實現垂直方向居中的方法。

/* 方法一：使用絕對定位和 transform */
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/* 方法二：使用 flexbox */
.parent {
display: flex;
align-items: center;
justify-content: center;
}
.child {
/* 無需任何屬性 */
}
/* 方法三：使用 table-cell */
.parent {
display: table-cell;
vertical-align: middle;
}
.child {
/* 無需任何屬性 */
}

以上是三種常用的實現垂直方向居中的方法。第一種方法使用了絕對定位和 transform，可以在沒有使用 flexbox 或 table-cell 的情況下實現垂直方向的居中。第二種方法使用了 flexbox，是當前比較流行的方法之一，但是需要注意的是不兼容低版本的瀏覽器。第三種方法使用了 table-cell，可以在沒有使用 flexbox 的情況下實現垂直方向的居中，但是需要注意的是不兼容 IE6 和 IE7。