div 垂直居中是一個常見的界面布局問題，特別是在制作網頁時經常會遇到。本文將介紹幾種實現 div 垂直居中的方法，并提供一些常見且實用的代碼案例。
一、使用 CSS Flexbox 實現垂直居中
Flexbox 是一種強大的 CSS 布局模型，它可以輕松實現元素的垂直居中。以下是一個使用 Flexbox 的代碼示例：

.container {
display: flex;  /* 將容器設置為 flex 布局 */
align-items: center;  /* 將子元素垂直居中 */
height: 300px;  /* 設置容器的高度 */
}
<br>
.item {
margin: auto;  /* 水平居中 */
}

在上述代碼中，我們將包含 div 元素的容器設置為 flex 布局，并通過 align-items: center;屬性將子元素垂直居中。同時，為了使 div 水平居中，我們給 div 添加了 margin: auto; 屬性。這種方法簡單且代碼量較少，適用于大多數情況。
二、使用絕對定位實現垂直居中
另一種常見的方法是使用絕對定位。以下是一個使用絕對定位的代碼示例：

.container {
position: relative;  /* 將容器設置為相對定位 */
height: 300px;  /* 設置容器的高度 */
}
<br>
.item {
position: absolute;  /* 將子元素設置為絕對定位 */
top: 50%;  /* 將子元素的頂部定位到父元素的 50% */
transform: translateY(-50%);  /* 將子元素向上移動自身高度的 50% */
}

在上述代碼中，我們將容器設置為相對定位，并設置了容器的高度。然后我們將子元素設置為絕對定位，并通過 top: 50%; 將子元素的頂部定位到父元素的 50%。接著，通過 transform: translateY(-50%); 將子元素向上移動自身高度的 50%，從而達到垂直居中的效果。
三、使用 table-cell 實現垂直居中
還有一種方法是使用 table-cell ，將父元素設置為 table 布局，并將子元素設置為 table-cell 布局。以下是一個使用 table-cell 的代碼示例：

.container {
display: table;  /* 將容器設置為 table 布局 */
height: 300px;  /* 設置容器的高度 */
}
<br>
.item {
display: table-cell;  /* 將子元素設置為 table-cell 布局 */
vertical-align: middle;  /* 將子元素垂直居中 */
text-align: center;  /* 將子元素水平居中 */
}

在上述代碼中，我們將容器的 display 屬性設置為 table，將其轉變為 table 布局。同時，將子元素的 display 屬性設置為 table-cell，將其轉變為 table-cell 布局。通過 vertical-align: middle; 和 text-align: center; 屬性，實現了子元素的垂直和水平居中。
：
本文介紹了三種常見的方法實現 div 垂直居中，分別是使用 CSS Flexbox、絕對定位和 table-cell。這些方法各有特點，在實際應用中可以根據具體情況選擇適合的方法來實現垂直居中效果。希望本文對你有所幫助，讓你更輕松地實現 div 垂直居中的布局。