在網頁開發中，img標簽常常被用于插入圖片。然而，在一些情況下，我們需要把圖片垂直居中顯示。這篇文章將介紹如何使用CSS實現垂直居中。

首先，我們需要給img元素一個固定的高度。如果不設置高度，圖片就會按照默認的尺寸進行顯示，很難實現垂直居中。例如：

img {
height: 200px;
}

接下來，我們使用CSS中的flexbox布局來實現圖片的垂直居中。flexbox布局是CSS3新增的一種布局方式，可以簡化很多定位和浮動的麻煩。大多數現代瀏覽器都支持flexbox布局。

.container {
display: flex;
align-items: center;
}

以上代碼中，我們把包含圖片的容器設置為flex布局，并使用align-items屬性將圖片垂直居中。align-items有幾個不同的屬性值，包括：

• flex-start：元素靠上對齊
• center：元素居中對齊
• flex-end：元素靠下對齊
• baseline：元素基線對齊
• stretch：元素沿著交叉軸方向拉伸

最后，我們把img元素的寬度設置為100%以確保圖片在容器中占據整個寬度：

img {
width: 100%;
height: 200px;
}

在完成上述步驟后，我們就可以輕松地實現圖片的垂直居中了。

總結：

• 給img元素設置一個固定的高度
• 使用flexbox布局并設置align-items屬性
• 將img元素的寬度設置為100%