CSS 垂直居中是前端開發中的一個常見問題，有很多種實現方式。本文將介紹 6 種實現方式。

1. 行高法。這是最簡單的一種實現方式，只需要將元素的行高設置與容器的高度相等即可。

.container {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.item {
line-height: 300px;
}

2. 絕對定位法。將元素的上下左右都設置為 50%，再通過使用 transform 屬性進行調整。

.container {
position: relative;
height: 300px;
}
.item {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

3. 彈性盒子法。使用彈性盒子的 align-items 屬性來進行垂直居中。

.container {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.item {
/* 可以不設置高度 */
}

4. CSS Grid。使用 CSS Grid 的 align-items 和 justify-items 屬性進行垂直和水平居中。

.container {
height: 300px;
display: grid;
align-items: center;
justify-items: center;
}
.item {
/* 可以不設置高度 */
}

5. 表格法。將元素包裹在一個表格中，并將單元格的 vertical-align 屬性設置為 middle。

.container {
height: 300px;
display: table;
}
.item {
display: table-cell;
text-align: center;
vertical-align: middle;
}

6. Flexbox + Grid。將元素包裹在一個 Flexbox 容器中，再在內部使用一個 Grid 容器實現水平和垂直居中。

.container {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.item {
display: grid;
place-items: center;
}

以上就是 6 種 CSS 垂直居中的實現方式。選擇合適的方法可以方便地解決各種前端項目中的垂直居中問題。