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

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

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

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

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

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

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

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

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

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