垂直居中是我們在前端開發中常會遇到的一個難題，而CSS提供了多種解決方案。下面將會介紹幾種常用的CSS垂直居中的寫法。 第一種方式是使用Flexbox。在父容器上使用display: flex;，并使用align-items: center;即可實現子元素垂直居中。代碼如下：

.container {
display: flex;
align-items: center;
}

第二種方式是使用絕對定位。我們可以通過top: 50%;和transform: translateY(-50%);來實現元素垂直居中。 代碼如下：

.container {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

第三種方式使用CSS Grid。在父容器上使用display: grid;將子元素放在一個單元格內，使用align-self: center;即可實現子元素垂直居中。 代碼如下：

.container {
display: grid;
align-items: center;
}
.child {
align-self: center;
}

以上是CSS垂直居中的三種常用的方法，我們可以根據實際情況選擇不同的方式，實現元素的垂直居中。 同時，需要注意的是，有些場景下必須要明確父元素和子元素的高度。因為垂直居中的實現需要通過計算元素的高度和行高等因素進行，因此我們需要說清楚這一點。