如何在 CSS 中居中图像？

CSS 帮助我们控制 Web 应用程序中图像的显示。居中图像或文本是 CSS 中的一项常见任务。要居中图像，我们需要将 margin-left 和 margin-right 的值设置为 auto，并通过使用 display: block; 属性将其设为块级元素。

如果图像在 div 元素中，那么我们可以使用 text-align: center; 属性将图像居中到 div 中。

<img> 元素被认为是一个内联元素，可以通过将 CSS 的 text-align: center; 属性应用于包含它的父元素来轻松居中。

注意：如果图像的宽度设置为 100%（全宽），则无法居中。

我们可以使用简写属性 margin 并将其设置为 auto 来将图像居中，而不是使用 margin-left 和 margin-right 属性。

让我们看看如何通过将 text-align: center; 属性应用于其父元素来居中图像。

示例

在此示例中，我们使用 text-align: center; 属性来对齐图像。图像在 div 元素中。

输出

示例

现在，我们使用 margin-left: auto; margin-right: auto; 和 display: block; 属性来将图像居中。

输出