如何使图像在 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 内形成完美对齐的图像。