原文：HTML Center Image – CSS Align Img Center Example，作者：Kolade Chris

如果你在用 HTML 和 CSS 制作网站，你会经常与图像打交道。

开发人员经常为 CSS 中的图像对齐问题而苦恼，尤其是在试图弄清如何将图像居中的时候。

在 CSS 中使任何东西居中都不是一件简单的事情——尤其是对初学者来说。这就是为什么人们会吹嘘自己能够让一个 div 居中:)

由于 img 元素是一个内联元素，这使得在居中它时有一点困难。不过不用担心，你可以将图片转换为块状元素，然后将其居中。

在这篇文章中，我将向你展示 4 种不同的方法，让你把图像居中。

如何使用 text-align 属性将图像居中

你可以用 text-align 属性将图片居中。

你应该知道的一件事是，用于引入图像的标签——img——是一个内联元素。用 text-align 属性居中只对块级元素有效。

那么，你如何用 text-align 属性将图像居中？你可以把图像包在一个块级元素中，比如一个 div，然后给这个 div 一个 text-align 属性，值为 center。

<div>
    <img src="fcc22.png" alt="freeCodeCamp" />
</div>

div {
      text-align: center;
    }
ss-1

如何使用 Flexbox 将图像居中

CSS Flexbox 的引入使任何东西的居中变得更加容易。

Flexbox 的工作原理是将你想要居中的东西放在一个容器中，并给容器一个 display 属性，值为 flex。然后，使用 justify-content 属性，值为 center，如下面的代码片段所示：

  div {
      display: flex;
      justify-content: center;
    }
ss-1

P.S.：一个设置为 center 的 justify-content 属性会使图像水平居中。要使图像垂直居中，你需要将 align-items 设为居中。

如何使用 CSS Grid 将图片居中

CSS Grid 的工作原理与 Flexbox 类似，但它的额外优点是 Grid 是多维的，而 Flexbox 是二维的。

要用 CSS Grid 将图片居中，需要将图片包在一个容器 div 元素中，并把它的 display 设置为 grid，然后将 place-items 属性设置为 center。

 div {
      display: grid;
      place-items: center;
    }
ss-1

P.S.：当 place-items 的值为 center 时，水平和垂直方向上都是居中。

如何使用 Margin 属性将图像居中

你也可以通过为图片设置自动的左右边距来使其居中。但就像 text-align 属性一样，margin 属性只对块级元素有效。

所以，你需要做的是先把图片转换成块级元素：

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

这两个属性可能已经足够了。但有时，你必须为图片设置一个宽度，所以可以将 margin 设置为 auto。

 img {
      display: block;
      margin: 0 auto;
      width: 40%;
    }
ss-2

P.S.：你可能不需要把宽度降到 40% 那么低。图像在 60％ 以上的时候是扭曲的，这就是为什么我设置它为 40％。

我希望这篇文章能帮助你选择最适合你的图像居中的方法。

谢谢你阅读本文。