在前端領域中，垂直居中是一個常見的挑戰。在 CSS 中實現垂直居中有很多種方法，本文將介紹一些常用的方法。

/* 方法一：使用 display: flex; */
.container {
display: flex;
align-items: center;
}
/* 方法二：使用 display: table-cell; 和 vertical-align: middle; */
.container {
display: table-cell;
vertical-align: middle;
}
/* 方法三：使用 absolute 定位和 transform 屬性 */
.container {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/* 方法四：使用 line-height */
.container {
height: 100px;
line-height: 100px;
}
.child {
display: inline-block;
vertical-align: middle;
}
/* 方法五：使用 calc() 函數 */
.container {
height: 100px;
}
.child {
height: calc(100% - 40px);
margin-top: 20px;
}

這些方法都非常實用，具體采用哪一種方法要根據實際情況和需求決定。希望這篇文章能夠幫助大家更好地掌握 CSS 中的垂直居中。