CSS設置垂直居中的方法有很多種，下面將詳細介紹幾種常用的方式。

/* 1. 使用flex布局 */
.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
/* 2. 使用table-cell屬性 */
.parent {
display: table-cell;
text-align: center; /* 水平居中 */
vertical-align: middle; /* 垂直居中 */
}
/* 3. 使用position和transform屬性 */
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 水平、垂直居中 */
}
/* 4. 使用line-height屬性 */
.parent {
height: 100px; /* 子元素高度 */
line-height: 100px; /* 父元素高度等于子元素高度 */
}
.child {
display: inline-block; /* 內聯元素可設置line-height屬性 */
vertical-align: middle; /* 垂直居中 */
}

這些方法都能很好地實現垂直居中，應根據實際情況選擇合適的方法。值得注意的是，第三種方法中的transform屬性需要瀏覽器支持。