<div>標簽是HTML中的一個重要元素，它在網頁布局中扮演著關鍵的角色。在網頁設計中，經常需要將圖片居中顯示。本文將介紹如何使用<div>和<img>標簽來實現圖片的居中顯示效果。
<div>標簽是HTML中的容器元素，可以用來封裝其他HTML元素。它可以通過CSS樣式來定義其寬度、高度、背景顏色等屬性。要實現圖片的居中顯示，我們可以使用<div>標簽來包裹<img>標簽，并設置樣式實現居中效果。
下面是幾個代碼案例，詳細解釋了如何居中顯示圖片。
代碼案例一：

<div style="text-align: center;">
<img src="image.jpg" alt="圖片" />
</div>

通過將<div>標簽的text-align樣式設置為center，可以使其中的內容居中顯示。這段代碼將圖片居中顯示在父級容器內。
代碼案例二：

<div style="display: flex; justify-content: center;">
<img src="image.jpg" alt="圖片" />
</div>

通過將<div>標簽的display樣式設置為flex，并將justify-content樣式設置為center，可以將其中的內容水平居中顯示。這段代碼同樣實現了圖片的居中顯示效果。
代碼案例三：

<div style="position: relative;">
<img src="image.jpg" alt="圖片" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" />
</div>

通過將<img>標簽的position樣式設置為absolute，并使用top、left、transform屬性來調整圖片的位置，可以將圖片居中顯示在<div>容器內。這段代碼的原理是將圖片的左上角定位到父級容器的中心點，然后通過transform屬性將其向左上角偏移自身寬度和高度的一半，從而實現圖片居中顯示效果。
代碼案例四：

<div style="position: relative;">
<div style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center;">
<img src="image.jpg" alt="圖片" />
</div>
</div>

這段代碼通過使用兩個嵌套的<div>標簽，將<img>標簽置于內層<div>標簽中，并設置內層<div>標簽的樣式來實現圖片的居中顯示。內層<div>標簽通過設置position樣式為absolute，并使用top、right、bottom、left屬性設置其在外層<div>容器中的尺寸。同時，設置其display樣式為flex，并使用justify-content和align-items屬性將其中的內容水平和垂直居中。這樣，圖片就能夠居中顯示在外層<div>容器中。
通過以上幾個代碼案例的介紹，我們可以看到，使用<div>和<img>標簽結合CSS樣式，可以實現圖片的居中顯示效果。無論是簡單的居中還是需要更復雜的布局，都可以通過靈活運用HTML、CSS來實現。希望本文的內容對您有所幫助！</div>