在 CSS 中實現垂直居中對于網頁設計師和開發者來說是非常重要的。在不同的網頁設計中，我們往往需要在父元素和子元素之間進行垂直居中的對齊，這樣可以使網頁看起來更美觀和規范。接下來我們來看一些 CSS 垂直居中的方法。

方法 1：使用 Flexbox

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

方法 2：使用 Table

.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}

方法 3：使用 Absolute

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%; /* 上下居中的關鍵 */
transform: translateY(-50%);
}

方法 4：使用 Line-Height

.parent {
height: 300px;
line-height: 300px; /* 文字的行高等于容器的高度 */
text-align: center; /* 水平居中 */
}
.child {
display: inline-block;
vertical-align: middle;
line-height: normal; /* 子元素的行高恢復默認值 */
}

總結

以上就是一些實現 CSS 垂直居中的方法。它們各有優缺點，需要根據實際需求進行選擇。我們要注意的是，實現垂直居中時，父元素和子元素的高度需要知道，這樣才能確定偏移量。同時，容器要設置為相對定位，子元素要設置為絕對定位。