CSS是前端開發中必不可少的一部分，它可以實現對網頁中各個元素的樣式和布局進行控制。其中，將一個div居中顯示圖片是經常會遇到的需求之一。本文將介紹如何使用CSS中的居中布局技巧，來實現div在div中居中顯示圖片的效果。
在網頁設計中，我們經常需要將一張圖片放在一個容器中居中顯示，給用戶呈現出更好的視覺效果。CSS的flex布局可以幫助我們輕松地實現這一目標。通過設置容器的display屬性為flex，并利用align-items和justify-content屬性進行調整，我們可以實現水平和垂直居中的效果。下面是幾個代碼案例，詳細說明了如何在div中居中顯示圖片。
第一個案例是最簡單的情況，我們只有一個容器div和一張圖片。我們可以使用以下代碼實現居中顯示的效果：

<div class="container">
<img src="圖片路徑" class="centered-img">
</div>
<br>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
}
<br>
.centered-img {
max-width: 100%;
max-height: 100%;
}
</style>

上述代碼中，我們創建了一個名為container的div作為容器，然后在其中插入了一張圖片。通過設置容器的display屬性為flex，我們可以讓容器的子元素水平和垂直居中。同時，我們還設置了圖片的最大寬度和最大高度，以確保圖片在容器中適應居中顯示的效果。
第二個案例是在一個容器中顯示多張圖片，這時我們可以使用flex布局的flex-wrap屬性讓圖片在一行中排列，并實現居中顯示的效果。以下是相關代碼：

<div class="container">
<img src="圖片路徑" class="centered-img">
<img src="圖片路徑" class="centered-img">
<img src="圖片路徑" class="centered-img">
<img src="圖片路徑" class="centered-img">
</div>
<br>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
<br>
.centered-img {
max-width: 100%;
max-height: 100%;
margin: 10px;
}
</style>

在上述代碼中，我們在容器中插入了多張圖片，然后設置了容器的display屬性為flex，并利用align-items和justify-content屬性實現居中顯示。此外，我們還設置了flex-wrap屬性為wrap，使得圖片可以在一行中排列，并且設置了圖片的margin屬性，以在圖片之間添加一定的間距。
第三個案例是將圖片放置在一個有固定寬度和高度的容器中，并實現居中顯示。以下是相關代碼：

<div class="container">
<div class="img-wrapper">
<img src="圖片路徑" class="centered-img">
</div>
</div>
<br>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
width: 600px;
height: 400px;
}
<br>
.img-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
<br>
.centered-img {
max-width: 100%;
max-height: 100%;
}
</style>

在上述代碼中，我們創建了一個名為container的div作為容器，設置了容器的寬度和高度。然后，在容器中再創建一個名為img-wrapper的div作為圖片的容器，并設置了容器的寬度和高度為100%。這樣，當圖片顯示時，它將自動適應容器的大小，并在容器中居中顯示。
通過以上幾個代碼案例，我們可以利用CSS的flex布局來實現div在div中居中顯示圖片的效果。無論是單張圖片，還是多張圖片，或者是放置在固定大小容器中，都能通過簡單的調整CSS樣式來實現居中顯示的效果。這種居中布局技巧在網頁設計中非常常見，可以為用戶帶來更好的瀏覽體驗。