在網站設計中，經常會遇到要將圖片垂直居中的需求。這時候我們可以使用一些CSS技巧來實現這個效果。 首先，讓我們來看一下一張圖片如何在垂直方向居中。我們可以使用CSS中的display和vertical-align屬性來實現。 我們假設有一個圖片標簽，寬度為300像素，高度為200像素，如下所示：

<img src="example.jpg" width="300" height="200">

我們可以將這個img標簽設置為塊級元素，而不是默認的行內元素。這樣，我們就能夠更好地控制它的尺寸和位置。我們可以使用CSS中的"display"屬性來實現：

img {
display: block;
}

接著，我們可以使用vertical-align屬性將圖片垂直居中。vertical-align屬性默認對行內元素生效，而對塊級元素不生效。但是，我們可以使用vertical-align和display屬性在塊級元素中生效。我們可以將圖片的父級元素設置為"table-cell"，這樣我們就可以使用vertical-align屬性來實現垂直居中了。

/* 父級元素設置為table-cell */
.container {
display: table-cell;
vertical-align: middle;
}

我們還可以給圖片設定一個高度，使其相對于父元素垂直居中。圖片的高度應該小于等于父級元素的高度，并將其設置為父級元素高度的百分比。

/* 設置圖片的高度，讓它垂直居中 */
img {
height: 50%;
}

最終的HTML代碼如下所示：

<div class="container">
<img src="example.jpg" width="300" height="200">
</div>

在以上代碼中，我們將圖片的直接父元素設置為table-cell，并添加了vertical-align和height屬性，使得圖片能夠垂直居中。 總之，使用CSS讓圖片在垂直方向居中，其實并不難，只需要理解display、vertical-align和height這些屬性的配合使用就行了。