CSS垂直居中問題一直是一個具有挑戰性的問題，尤其是當你的頁面需要實現動態內容時。本文主要介紹CSS垂直居中顯示的幾種方式。

1. 使用Flexbox實現居中

使用Flexbox很容易實現元素的水平和垂直居中。需要給父元素添加：display: flex;和align-items: center; justify-content: center;

.parent {
display: flex;
align-items: center;
justify-content: center;
}

2. 使用定位實現居中

使用相對定位和絕對定位的元素可以實現垂直居中效果。需要給父元素添加：position: relative;

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

3. 使用display:table-cell實現居中

使用display:table-cell屬性，可以使元素的內部表現為表格，那么我們就可以使用vertical-align:middle屬性使table-cell元素垂直居中。需要給父元素添加：display: table-cell; vertical-align: middle;

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

總結

以上三種方式是實現CSS垂直居中的最常見方法。Flexbox和定位在實現居中時具有更好的可控性，而display:table-cell則更加適合用于實現表格布局中的垂直居中效果。在使用時根據實際情況進行選擇即可。