如何在 Div 中水平和垂直居中圖像？

在 Div 的中心和中間對齊圖像

在網頁設計中，實現元素的精確對齊對於精美且具有視覺吸引力的用戶界面至關重要。一個常見的挑戰是在 div 容器內對齊影像，使其水平和垂直居中。

要解決此問題，請考慮以下div 結構：

<div>
<p>要對齊影像div 的中心，我們可以使用CSS 屬性：</p>
<pre class="brush:php;toolbar:false">body {
  margin: 0;
}

#over img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

透過設定margin-left: auto; margin-right: auto;，我們指示瀏覽器自動調整圖片的水平邊距，以確保它在div內居中。另外，設定顯示：塊；允許圖像佔據自己的行，從而垂直居中。

使用這些 CSS 屬性，無論螢幕大小如何，您的圖片都將在 div 容器的中心和中間精確對齊或 div。