HTML中如何設(shè)置DIV居中顯示圖片？ 在編寫網(wǎng)頁時，我們通常會使用DIV標(biāo)簽來布局頁面，而在其中嵌套圖片元素來顯示圖片，下面我們介紹一下如何設(shè)置DIV居中顯示圖片。 首先，我們需要在HTML中添加一個DIV元素，然后使用CSS樣式來控制其中的圖片元素居中顯示。 例如，我們可以使用下面的代碼來創(chuàng)建一個DIV和其中的一張圖片：

<div class="image-container">
<img src="image.jpg" alt="圖片" />
</div>

在上面的代碼中，我們給DIV元素設(shè)置了一個class屬性為“image-container”，并在其中添加了一張圖片。 接下來，我們需要使用CSS樣式來設(shè)置圖片元素居中顯示，代碼如下：

.image-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.image-container img {
max-width: 100%;
max-height: 100%;
height: auto;
}

在上面的CSS樣式中，我們給DIV元素設(shè)置了一個display屬性為flex，并設(shè)置了justify-content和align-items屬性為center，這樣就可以使圖片元素在水平和垂直方向上居中顯示。 另外，我們還設(shè)置了圖片元素的max-width和max-height屬性為100%，這樣可以使圖片按比例縮放，并保證其不會超出容器的范圍。 最后，我們給DIV元素設(shè)置了一個height屬性為100%，這樣可以讓圖片元素占據(jù)整個容器的空間，進(jìn)一步保證圖片的顯示效果。 通過上面的代碼，我們就可以實(shí)現(xiàn)了DIV居中顯示圖片的效果，讓網(wǎng)頁布局更加美觀和易讀。