CSS中的垂直居中一直是前端開發中常見的難點之一。下面將介紹幾種常見的實現方式。

/* 方法一：使用flex布局 */
.parent {
display: flex;
justify-content: center;
align-items: center;
}
/* 方法二：使用絕對定位 */
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/* 方法三：使用table布局 */
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
/* 方法四：使用line-height */
.parent {
height: 100px;
line-height: 100px; /*與height相同*/
}
.child {
display: inline-block;
vertical-align: middle;
}
/* 方法五：使用grid布局 */
.parent {
display: grid;
}
.child {
align-self: center;
}

以上就是常見的幾種CSS垂直居中方式，根據實現場景和實現難度不同，我們可以靈活的選擇合適的方法。希望本文能夠對你有所幫助。