在網頁設計中，有時需要將圖片垂直居中，這是一項常見的功能。在 CSS 中，垂直居中圖片可以通過幾種不同的方法來實現。

img {
display: block; /* 讓圖片以塊狀元素顯示 */
margin: auto; /* 將圖片水平居中 */
height: 100%; /* 讓圖片高度占據空間的 100% */
}

上面的 CSS 代碼將圖片設置為塊級元素，并將水平居中。然后，通過設置圖片的高度為 100%，實現了垂直居中。

另一種常見的方法是使用 flexbox。通過將包含圖片的父元素設置為 flex 容器，并將子元素（即圖片）垂直和水平居中，可以輕松實現垂直居中圖片。

.container {
display: flex; /* 將容器設置為 flex 容器 */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.container img {
max-width: 100%; /* 圖片寬度不超過父元素 */
max-height: 100%; /* 圖片高度不超過父元素 */
}

上面的代碼將包含圖片的 div 容器設置為 flex 容器，并使用 align-items 和 justify-content 屬性將子元素（即圖片）垂直和水平居中。此外，為了避免圖片超過父元素的大小，使用 max-width 和 max-height 屬性控制了圖片的大小。