CSS中的垂直居中是前端開發中常見的問題。尤其是在響應式設計中，居中的需求更加頻繁。以下是一些CSS垂直居中的實用技巧。

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

在實際開發中，我們需要根據具體的場景選擇合適的垂直居中方法。同時，考慮到兼容性問題，我們也需要多做測試和兼容性調整。