垂直居中是一個在網頁布局中非常重要的問題。如何使元素在垂直方向上位置居中，是前端工程師們經常需要解決的難題之一。在 CSS 中，有各種方法可以實現垂直居中，本文將重點介紹一些常用的垂直居中 CSS 代碼。

/* 方法一：使用 flex 布局 */
.container {
display: flex;
align-items: center; /* 垂直居中 */
}
/* 方法二：使用絕對定位和 transform 屬性 */
.container {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%); /* 垂直居中 */
}
/* 方法三：使用 table-cell 布局 */
.container {
display: table-cell;
vertical-align: middle; /* 垂直居中 */
}
/* 方法四：使用 line-height 屬性 */
.container {
height: 100px;
line-height: 100px; /* 垂直居中 */
}

以上就是一些實現垂直居中的常見 CSS 代碼，它們分別采用了 flex 布局、絕對定位和 transform 屬性、table-cell 布局、line-height 屬性等方式，可以根據實際需要進行選擇。當然，不同的垂直居中方法也有其各自的優缺點，需要根據具體情況來決定采用哪種方式。