在CSS中，div是HTML中最常用的塊級元素之一，用于創建容器和布局。通過CSS的樣式設置，我們可以使div水平或垂直居中顯示。在本文中，我們將重點介紹如何通過div的CSS樣式來實現垂直居中顯示。

要使div垂直居中顯示，我們可以使用多種方法。以下是幾個常見的解決方案。

1. 使用display和align-items屬性

我們可以通過將display屬性設置為flex，再使用align-items屬性來實現div的垂直居中顯示。具體的代碼如下：

<div style="display: flex; align-items: center; height: 200px;">
<div style="background-color: gray; width: 100px; height: 100px;"></div>
</div>

，我們將外層的div的display屬性設置為flex，這樣它將成為一個彈性容器。接下來，我們使用align-items屬性將內部的div在垂直方向上居中顯示。

2. 使用position和transform屬性

另一種方法是使用position屬性和transform屬性來實現div的垂直居中顯示。以下是實現的代碼：

<div style="position: relative; height: 200px;">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: gray; width: 100px; height: 100px;"></div>
</div>

，我們將外層的div的position屬性設置為relative，這樣內部的div的位置將相對于它來定位。然后，我們將內部的div的position屬性設置為absolute，這樣它將脫離文檔流。接著，我們使用top和left屬性將內部的div定位到外層div的中心，然后使用transform屬性的translate函數將其自身平移50%的寬度和高度，相對于自身的中心點。

3. 使用table和table-cell屬性

最后一種方法是使用table和table-cell屬性來實現div的垂直居中顯示。以下是實現的代碼：

<div style="display: table; height: 200px;">
<div style="display: table-cell; vertical-align: middle; background-color: gray; width: 100px; height: 100px;"></div>
</div>

通過將外層的div的display屬性設置為table，我們將其變為一個表格型元素。然后，我們將內部的div的display屬性設置為table-cell，這樣它將作為表格單元格。最后，我們使用vertical-align屬性將內部的div在垂直方向上居中顯示。

以上是幾種常見的方法來實現div的垂直居中顯示。每種方法都有其適用的場景和特點，根據實際需求選擇合適的方法。希望本文能幫助你理解和掌握這些方法，使你能夠輕松實現div的垂直居中顯示。