在HTML中，圖片的上下居中一直是一個比較棘手的問題。下面我們來看一下如何設(shè)置圖片上下居中。

<div style="display: flex; align-items: center; justify-content: center;">
<img src="img/example.jpg" alt="example">
</div>

上述代碼中，我們使用了一個容器div，并設(shè)置了以下屬性：

• display: flex;
• align-items: center;
• justify-content: center;

這些屬性的作用是讓容器內(nèi)部的元素垂直居中和水平居中。

接下來我們使用了一個img標(biāo)簽，用于顯示圖片，并設(shè)置了一張圖片的地址和描述。

在這段代碼中，使用div作為容器是較為常見的方法，當(dāng)然你也可以使用其他標(biāo)簽進行包裹。但是，不管使用什么標(biāo)簽，都需要將容器的高度和圖片的高度設(shè)置為相等。

<div style="height: 300px;">
<img src="img/example.jpg" alt="example" style="height: 100%;">
</div>

上述代碼中，我們設(shè)置了容器的高度為300像素，并將圖片的高度設(shè)置為100%。這樣，圖片就會根據(jù)容器的高度進行縮放，從而達到上下居中的效果。

除了使用display: flex;屬性外，我們還可以使用vertical-align屬性來實現(xiàn)圖片的上下居中，但是需要注意的是，這種方法只適用于行內(nèi)元素。此外，在實際應(yīng)用中，還需要注意圖片的位置和大小，以避免出現(xiàn)圖片超出容器或者圖片變形等問題。