CSS是一種用來為網頁添加樣式和布局的語言。其中一個常見需求是讓一個div中的另一個div居中顯示圖片。通過使用CSS的布局屬性和一些技巧，我們可以輕松實現這個效果。本文將通過幾個代碼案例來詳細解釋如何實現讓div中的div居中顯示圖片。
代碼案例1： 假設我們有以下HTML結構：

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

為了讓image-container居中顯示圖片，我們可以使用以下CSS樣式：

css
.container {
display: flex;
justify-content: center;
align-items: center;
}
<br>
.image-container {
text-align: center;
}

在這個例子中，我們使用了flex布局來讓container居中顯示其內容。justify-content和align-items屬性將子元素水平和垂直居中。image-container的text-align屬性將圖片水平居中。
代碼案例2： 另一種常見的方法是使用position屬性和transform屬性來實現居中效果。以下是示例代碼：

css
.container {
position: relative;
}
<br>
.image-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

在這個例子中，我們將container設置為相對定位，然后將image-container設置為絕對定位。top和left屬性將image-container定位到居中位置，而transform屬性通過translate函數對其進行微調，使其完全居中顯示。
代碼案例3： 對于使用背景圖片的情況，我們可以使用background-position屬性來居中顯示背景圖片。以下是示例代碼：

css
.container {
background-image: url(example.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

在這個例子中，我們將圖片作為背景圖片添加到container中，background-position屬性將背景圖片居中顯示。background-repeat屬性設置為no-repeat以防止圖片重復，background-size屬性設置為cover以確保背景圖片覆蓋整個container。
綜上所述，我們可以使用不同的CSS屬性和技巧來讓div里的div居中顯示圖片。通過靈活運用這些方法，我們能夠實現不同展示需求下的居中效果。以上是一些常見的示例代碼，希望對您有所幫助。