迹忆客 专注技术分享

在本文中，我们将介绍三种借助 CSS 使 HTML 中的图像居中的方法。

在 CSS 中使用 display 和 margin 属性居中图像

我们可以一起使用 display 和 margin CSS 属性来使图像居中。图像的 display 属性最初是 inline。因此，我们可以在一行中添加多个图像。例如，如果我们编写以下代码，我们可以看到连续的两个图像。

<img src="apple.jpg" alt="apple"/>
<img src="banana.jpg" alt="banana" /> 

因此，我们必须将图像的 display 属性更改为 block，以便仅将一张图像放置在一行中。然后，我们可以给图像 margin 的 0px auto 使其居中。图像的顶部和底部将有一个 0px 边距。第一个值可以是任何数字，但第二个值必须是 auto。auto 为图像提供了一个边距，将其置于正中央。此过程仅在我们必须连续将一张图像居中时才有效。

例如，创建一个 HTML 文档并使用 img 标签放置一个图像。正确写入 src 值并写入 alt 以使图像因某种原因未显示时有意义。在 src 属性中使用占位符图像 https://loremflickr.com/320/240。在 CSS 中，将 display 属性设置为 block，并为其设置 0px auto 的 margin。根据我们的要求，margin 的第一个值设置为任意数字。

下面的示例显示图像居中，因为我们将 display 值设置为 block，并为其设置了 0px auto 的 margin。

示例代码：

<img src="/img/DelftStack/logo.png" alt="Logo" />

img{
 display: block;
 margin: 0px auto;
}

在 CSS 中使用 text-align 属性居中图像

我们可以使用 text-align CSS 属性将图像居中。我们可以将图像包裹在 div 中并将 text-align 属性设置为 center，然后图像将居中。这种方法可以将多张图像排成一行，与之前的方法只将一张图像居中。我们可以将这种方法用于单个和多个图像。

例如，创建一个 div 并为其指定一个 parent 类。然后，在 div 内，使用 img 标签上传图像。将 src 设置为 https://loremflickr.com/320/240，将 alt 设置为 cat。在 CSS 中，选择 div 使用其类名，即 .parent，并将其 text-align 属性设置为 center。

下面的示例显示 div 内的图像居中，因为我们将 div 的 text-align CSS 属性设置为 center。

示例代码：

<div class="parent">
 <img src="/img/DelftStack/logo.png" alt="Logo" />
</div>

.parent{
 text-align : center;
}

使用 flexbox CSS 属性将图像居中

Flexbox 是应用最广泛的 CSS 技术之一。flexbox 背后的主要思想是让容器能够改变其项目。我们可以通过将 display 属性设置为 flex 来使用容器内的 flexbox 属性。然后我们可以使用 justify-content: center 属性将容器内的项目或图像水平居中。我们可以将 align-items 属性设置为 center 以将项目垂直居中。

例如，创建一个 div 并将其命名为 container。然后使用带有 src 和 alt 的 img 标签在 div 中放置一个图像。选择 div 使用其类名，即 .container，并将其 display 属性设置为 flex。然后将 justify-content flexbox 属性设置为 center。

下面的示例显示 div 内的 image 使用 flexbox 属性居中。

<div class="container">
 <img src="/img/DelftStack/logo.png" alt="Logo" />
</div>

.container{
 display: flex;
 justify-content: center;
}