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

在Div 內居中：實現視覺對齊

在Web 開發領域，對齊元素對於創建具有視覺吸引力和功能性的設計至關重要。處理 div 中的圖像時，確保它們水平和垂直居中至關重要。

考慮以下 HTML 片段：

<div>
<p>預設情況下，圖片會位於div 的左上角。要達到完美居中，需要組合 CSS 屬性：</p>
<p><strong>水平居中：</strong><br>要讓圖片水平居中，請採用以下 CSS 規則：</p>
<pre class="brush:php;toolbar:false">#over img {
  margin-left: auto;
  margin-right: auto;
}

此程式碼指示瀏覽器自動調整影像的左右邊距，使其在其內部等距

垂直居中：
對於垂直居中，display 屬性發揮作用：

#over img {
  ...
  display: block;
}

設定display: block 確保影像的行為類似於區塊級元素，佔據div 內的全部可用寬度。

這些組合的 CSS 規則有效地將圖像水平居中和垂直方向，從而在 div 內形成完美對齊的圖像。