在網頁開發中，實現圖片垂直居中是一個常見的需求。而在使用<div>標簽進行布局時，如何將圖片垂直居中便成為一個值得探討的話題。

下面將通過幾個示例代碼，詳細解釋如何使用<div>標簽實現圖片垂直居中。

第一個示例是最簡單的方法，使用相對定位和負邊距來實現圖片的垂直居中：

<div class="container">
<img src="img.jpg" alt="圖片" class="center-image">
</div>
<style>
.container {
position: relative;
height: 300px;
/* 設置容器高度為所需的垂直居中效果 */
}
.center-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 使用負邊距將圖片居中 */
}
</style>

在上述代碼中，我們給<div>標簽設置了一個相對定位的父容器，并為其設置了一個高度。然后，對<img>標簽應用了絕對定位，使用top和left屬性將其居中，同時通過transform屬性實現了負邊距效果，使圖片在垂直方向上居中顯示。

如果我們需要實現一種更加靈活的垂直居中效果，可以使用Flex布局來實現：

<div class="container">
<img src="img.jpg" alt="圖片" class="center-image">
</div>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
/* 使用Flex布局使圖片垂直居中 */
}
</style>

上述代碼中，我們給父容器的樣式添加了display: flex，然后通過align-items和justify-content屬性將子元素（圖片）在垂直和水平方向上都居中顯示。

為了兼容性更好的垂直居中效果，我們還可以使用table布局來實現：

<div class="container">
<div class="table-cell">
<img src="img.jpg" alt="圖片" class="center-image">
</div>
</div>
<style>
.container {
display: table;
width: 100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.center-image {
display: inline-block;
vertical-align: middle;
}
</style>

在上述代碼中，我們使用了display: table和display: table-cell屬性來實現table布局。通過vertical-align屬性將圖片垂直居中，并設置text-align: center使其水平居中。

而言，使用<div>標簽實現圖片的垂直居中有多種方法，可以根據具體需求選擇最適合的方法。以上提供了幾個常見的示例代碼，希望能對你有所幫助。