CSS 中的垂直居中是一個常見的難點，有時候在實際開發中也比較常用。本文就來分享一些常見的垂直居中方法。

/* 方法一：使用 table 和 table-cell 屬性 */
.container{
display: table;
}
.child{
display: table-cell;
vertical-align: middle;
}
/* 方法二：使用 line-height 屬性 */
.container{
line-height: 200px; /* 子元素高度 */
}
.child{
display: inline-block;
vertical-align: middle;
}
/* 方法三：使用 flexbox 屬性 */
.container{
display: flex;
align-items: center;
justify-content: center;
}
/* 方法四：使用絕對定位 */
.container{
position: relative;
}
.child{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/* 方法五：使用 grid 布局 */
.container{
display: grid;
place-items: center;
}

以上方法均可實現垂直居中，但各自有優缺點，需要根據實際情況選擇。例如 table-cell 屬性不兼容 IE8 及以下瀏覽器，而絕對定位方式需要知道子元素高度等等。希望本文能給大家提供一些幫助。