CSS 中的垂直居中問題一直是一個困擾前端開發者的問題。在這篇文章中，我們將討論 CSS 中垂直居中的幾種方法。

1. 使用 Flexbox

.parent{
display:flex;
align-items:center; // 垂直居中
}

2. 使用 Grid

.parent{
display:grid;
place-items:center; // 垂直居中
}

3. 使用 table-cell

.parent{
display:table-cell;
vertical-align:middle; // 垂直居中
}

4. 使用 Absolute 和 translation

.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
transform:translateY(-50%); // 垂直居中
}

5. 使用 line-height

.parent{
height:100px;
line-height:100px; // 垂直居中
}

6. 使用偽元素

.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
transform:translateY(-50%);
}
.child::before{
content:"";
display:inline-block;
height:100%;
vertical-align:middle;
}

這些方法都可以在不同場景下應用，開發者可以根據具體情況選擇最適合的垂直居中方法。