在網頁設計中，我們經常需要將某個div中的圖片居中顯示。為了實現這個效果，可以使用CSS來設置div的樣式。在CSS中，可以使用以下幾種方法將div下的div居中顯示圖片。
第一種方法是使用flex布局。Flex布局是CSS3中的一種新布局模式，可以方便地實現元素的對齊和布局。要使用flex布局將div下的div居中顯示圖片，可以設置外層div的樣式為display: flex，并給其子div設置margin: auto。代碼如下：

<style>
.outer-div {
display: flex;
}
<br>
.inner-div {
margin: auto;
}
</style>
<br>
<div class="outer-div">
<div class="inner-div">
<img src="images/example.jpg" alt="example">
</div>
</div>

在上述代碼中，外層div的樣式為display: flex，表示使用flex布局模式。內層div的樣式為margin: auto，表示將其在水平和垂直方向上居中顯示。
第二種方法是使用絕對定位。可以將子div的樣式設置為position: absolute，并給其設置top: 50%和left: 50%的值，然后再使用transform屬性將其向左向上移動自身寬度和高度的一半。具體代碼如下：

<style>
.outer-div {
position: relative;
}
<br>
.inner-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<br>
<div class="outer-div">
<div class="inner-div">
<img src="images/example.jpg" alt="example">
</div>
</div>

在上述代碼中，外層div的樣式為position: relative，表示使用相對定位。內層div的樣式為position: absolute，top: 50%和left: 50%，表示將其相對于外層div的頂部和左側距離都設置為50%。transform: translate(-50%, -50%)表示將內層div向左向上移動自身寬度和高度的一半，實現居中顯示的效果。
第三種方法是使用表格布局。可以將外層div的樣式設置為display: table，并將內層div的樣式設置為display: table-cell，并使用text-align: center和vertical-align: middle來實現水平和垂直居中。代碼如下：

<style>
.outer-div {
display: table;
width: 100%;
height: 100%;
}
<br>
.inner-div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
</style>
<br>
<div class="outer-div">
<div class="inner-div">
<img src="images/example.jpg" alt="example">
</div>
</div>

在上述代碼中，外層div的樣式為display: table，表示使用表格布局。內層div的樣式為display: table-cell，text-align: center，vertical-align: middle，表示將其水平和垂直方向上居中顯示。
通過以上三種方法，我們可以在CSS中實現div下的div居中顯示圖片的效果。可以根據實際需求選擇其中一種方法進行使用。