CSS 垂直居中是前端開發(fā)中的一個(gè)常見問題，有很多種實(shí)現(xiàn)方式。本文將介紹 6 種實(shí)現(xiàn)方式。

1. 行高法。這是最簡(jiǎn)單的一種實(shí)現(xiàn)方式，只需要將元素的行高設(shè)置與容器的高度相等即可。

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

2. 絕對(duì)定位法。將元素的上下左右都設(shè)置為 50%，再通過使用 transform 屬性進(jìn)行調(diào)整。

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

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

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

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

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

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

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

6. Flexbox + Grid。將元素包裹在一個(gè) Flexbox 容器中，再在內(nèi)部使用一個(gè) Grid 容器實(shí)現(xiàn)水平和垂直居中。

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

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