CSS中的垂直居中是前端開發(fā)中常見的問題。尤其是在響應(yīng)式設(shè)計(jì)中，居中的需求更加頻繁。以下是一些CSS垂直居中的實(shí)用技巧。

/* 1.使用Flex實(shí)現(xiàn)垂直居中 */
.container {
display: flex;
align-items: center;
justify-content: center;
}
/* 2.使用絕對(duì)定位實(shí)現(xiàn)垂直居中 */
.container {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/* 3.使用table實(shí)現(xiàn)垂直居中 */
.container {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
/* 4.使用line-height實(shí)現(xiàn)單行文本垂直居中 */
.container {
line-height: 200px;
}
/* 5.使用calc函數(shù)實(shí)現(xiàn)垂直居中 */
.container {
height: 100vh;
position: relative;
}
.child {
position: absolute;
top: calc(50% - 50px);
}

在實(shí)際開發(fā)中，我們需要根據(jù)具體的場(chǎng)景選擇合適的垂直居中方法。同時(shí)，考慮到兼容性問題，我們也需要多做測(cè)試和兼容性調(diào)整。