在前端開發中，經常會遇到需要垂直居中的情況，比如在容器中居中文字或者圖片等。下面，我會介紹幾種實現 CSS 垂直居中的方法。 1. 使用 line-height 屬性 將容器的 line-height 屬性設置為和容器高度一樣大，就可以實現其中的文字或者圖片垂直居中了。因為這種方法需要容器高度和文字或者圖片高度一樣，所以適用場景相對比較受限。 比如下面這段代碼就可以將文字垂直居中：

.container {
height: 100px;
line-height: 100px;
}

2. 使用 flex 布局

使用 flex 布局是一個非常方便的方法來實現垂直居中。只需要將容器設置為 display: flex，并將內容設置為 align-self: center 就可以了。 下面是示意代碼：

.container {
display: flex;
align-items: center; /* 水平居中 */
justify-content: center; /* 垂直居中 */
}
.content {
align-self: center;
}

3. 使用 table-cell 屬性

將容器的 display 屬性設置為 table，將容器中的元素的 display 屬性設置為 table-cell，就可以實現垂直居中效果了。 下面是示意代碼：

.container {
display: table;
height: 100px;
width: 100%;
}
.content {
display: table-cell;
vertical-align: middle;
}

以上就是三種比較常見的 CSS 垂直居中的方法，使用哪種方法可以根據具體情況來選擇，希望對你有所幫助。