<div>是HTML中的一個常用標簽，用于創建一個區塊或容器。在一個div中可以包含多個其他元素，如文本、圖片、表單等。本文將介紹如何使用div中的多個div來居中顯示圖片。
在HTML文件中，使用CSS樣式可以通過設置元素的寬度、高度、外邊距和內邊距等屬性來實現居中顯示。以下是幾個常用的代碼案例，用于詳細解釋說明如何實現div中多個div居中顯示圖片的效果。
案例一：

<style>
.container {
display: flex;
justify-content: center;
align-items: center;
}
</style>
<br>
<div class="container">
<div>
<img src="example.jpg" alt="示例圖片">
</div>
</div>

在這個案例中，我們使用了flex布局來實現居中。通過將外層的div設置為display: flex，并使用justify-content: center和align-items: center將內部的div居中顯示。在內部div中，我們可以插入圖片元素<img>，并設置src屬性為圖片的URL。
案例二：

<style>
.container {
position: relative;
text-align: center;
}
.container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<br>
<div class="container">
<img src="example.jpg" alt="示例圖片">
</div>

這個案例中，我們使用了絕對定位和transform屬性來實現居中。在外層div的樣式中，我們將position設置為relative，使得內部圖片元素相對于外層div進行定位。然后，在圖片元素的樣式中，將位置設置為absolute，并使用top: 50%和left: 50%將圖片的中心定位在父容器的中心。最后，使用transform屬性的translate函數來將圖片向左上角移動自身寬度和高度的一半，以使其完全居中顯示。
案例三：

<style>
.container {
display: grid;
place-items: center;
}
</style>
<br>
<div class="container">
<div>
<img src="example.jpg" alt="示例圖片">
</div>
</div>

最后一個案例中，我們使用了CSS的grid布局來實現居中。通過將外層div設置為display: grid，并使用place-items: center將內部的div居中顯示。在內部div中，我們可以插入圖片元素<img>，并設置src屬性為圖片的URL。
通過以上幾個案例的解釋，我們可以看到，通過合適的CSS樣式，我們可以很容易地實現div中多個div居中顯示圖片的效果。選擇適合自己需求的方法，并根據需要做相應的樣式調整，就可以在網頁中實現漂亮的圖片居中展示了。