如何在 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。