在網站開發中，垂直居中是一個常見的需求，特別是在設計響應式布局時更是如此。但是，實現垂直居中并不容易，尤其是在不同設備上顯示效果不一致的情況下。下面就讓我們一起來探討一下如何用 CSS 實現垂直居中。

父元素 {
position: relative/absolute/fixed;
}
子元素 {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

這是最基本的方法，即將子元素向上移動其自身高度一半的單位，這樣就能實現居中顯示。需要注意的是，這種方法需要父級元素相對或絕對定位。

父元素 {
display: flex;
justify-content: center;
align-items: center;
}

使用 Flexbox 布局是另一種很方便的垂直居中實現方法。通過該方法，我們可以使用justify-content: center;和align-items: center;屬性來水平和垂直居中所有子元素。這種方法甚至在子元素高度不固定時也能很好地工作。

總的來說，垂直居中需要注意一些細節，如定位和元素大小等。但是，我們可以通過合適的 CSS 屬性來實現它，以確保我們的頁面呈現出最佳效果。