原文：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 {
text-align: center;
}
如何使用 Flexbox 将图像居中CSS Flexbox 的引入使任何东西的居中变得更加容易。
Flexbox 的工作原理是将你想要居中的东西放在一个容器中，并给容器一个 display 属性，值为 flex。然后，使用 justify-content 属性，值为 center，如下面的代码片段所示：
div {
display: flex;
justify-content: center;
}
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;
}
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%;
}
P.S.：你可能不需要把宽度降到 40% 那么低。图像在 60％ 以上的时候是扭曲的，这就是为什么我设置它为 40％。
我希望这篇文章能帮助你选择最适合你的图像居中的方法。
谢谢你阅读本文。