div img 左右居中是指將一張圖片在其所在的 div 元素中水平居中。水平居中是指圖片的左右邊距相等，使圖片在父元素中水平居中顯示。在實際開發中，我們經常需要將圖片左右居中，以便在網頁中呈現漂亮的布局和設計。
下面我們將通過幾個代碼案例來詳細解釋如何實現 div img 左右居中的效果。，我們需要創建一個 div 元素，然后在其中插入一張圖片。接著，我們可以使用不同的方法實現圖片的水平居中。
案例一：使用 margin 屬性實現左右居中

，我們可以使用 CSS 的 margin 屬性來實現圖片的左右居中。我們將設置圖片的左右 margin 為 auto，同時將其 display 屬性設置為 block：

<code>
<style>
.centered-img {
display: block;
margin: 0 auto;
}
</style>
<br>
    <div>
<img src="image.jpg" class="centered-img" alt="centered image">
</div>
</code>

在上述代碼中，我們將圖片的左右 margin 設置為 auto，這樣圖片就會在 div 元素中水平居中。同時，我們將圖片的 display 屬性設置為 block，將其顯示為一個塊級元素。

案例二：使用 flexbox 布局實現左右居中

第二種方法是使用 CSS3 的 flexbox 布局來實現圖片的左右居中。我們可以將 div 元素的 display 屬性設置為 flex，并使用 justify-content 屬性將圖片水平居中：

<code>
<style>
.centered-img-container {
display: flex;
justify-content: center;
}
</style>
<br>
    <div class="centered-img-container">
<img src="image.jpg" alt="centered image">
</div>
</code>

在上述代碼中，我們將 div 元素的 display 屬性設置為 flex，這樣可以創建一個 flex 容器。然后，我們使用 justify-content 屬性將圖片水平居中顯示。

案例三：使用定位實現左右居中

第三種方法是使用 CSS 的絕對定位來實現圖片的左右居中。我們可以將 div 元素的 position 屬性設置為 relative，然后將圖片的 position 屬性設置為 absolute，并設置 left 和 right 屬性為 0，將圖片拉伸以填充整個 div 元素：

<code>
<style>
.centered-img-container {
position: relative;
}
.centered-img {
position: absolute;
left: 0;
right: 0;
width: 100%;
}
</style>
<br>
    <div class="centered-img-container">
<img src="image.jpg" class="centered-img" alt="centered image">
</div>
</code>

在上述代碼中，我們將 div 元素的 position 屬性設置為 relative，使其成為絕對定位的參考點。然后，我們將圖片的 position 屬性設置為 absolute，將其相對于參考點進行定位。同時，將圖片的 left 和 right 屬性設置為 0，使其撐滿整個 div 元素的寬度。

：

在本文中，我們介紹了三種實現 div img 左右居中效果的方法：使用 margin 屬性、使用 flexbox 布局和使用定位。每種方法都有其優勢和適用場景，開發者可以根據具體需求選擇合適的方法來實現圖片的水平居中。以上案例僅供參考，開發者可以根據實際情況進行調整和改進。