<div>標簽是HTML中最常用的容器標簽之一，可以用來將頁面中的內容劃分為多個區塊。在某些情況下，我們可能希望在一個<div>中放置多個<div>，并將這些<div>中的圖片居中顯示。本文將以幾個代碼案例來詳細說明如何實現這一效果。

，我們可以使用CSS的flexbox布局來實現<div>中多個<div>的居中顯示。為了讓<div>中的圖片居中顯示，我們可以設置父級<div>的display屬性為flex，并使用align-items和justify-content屬性將子級<div>水平和垂直居中。

\#container {
display: flex;
align-items: center;
justify-content: center;
}

然后，在父級<div>中創建多個子級<div>，并在子級<div>中添加圖片。為了使圖片居中顯示，可以為子級<div>添加text-align屬性并將其值設置為center。

\#container \textgreater div {
text-align: center;
}

接下來，我們可以使用CSS的position屬性來實現<div>中多個<div>的居中顯示。為了讓子級<div>水平和垂直居中，可以為子級<div>設置position屬性為absolute，并將left和top屬性的值都設置為50%。然后，使用transform屬性的translateX和translateY方法將子級<div>向左和向上移動自身寬度和高度的一半。

\#container {
position: relative;
}
<br>
\#container \textgreater div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

最后，我們可以使用CSS的grid布局來實現<div>中多個<div>的居中顯示。，為父級<div>設置display屬性為grid，并使用place-items屬性將子級<div>水平和垂直居中。

\#container {
display: grid;
place-items: center;
}

然后，在父級<div>中放置多個子級<div>，并在子級<div>中添加圖片即可。使用這種方法，所有的子級<div>都將在父級<div>中居中顯示。

通過以上幾個代碼案例，我們可以實現在<div>中多個<div>的居中顯示圖片。無論選擇使用flexbox布局、position屬性還是grid布局，都可以輕松實現這一效果。在實際開發中，可以根據需要選擇最適合的方法來實現頁面布局的需求。