许多开发人员在处理图片时会遇到困难。处理响应式和对齐特别困难，尤其是将图片居中在页面中间。
因此，在这篇文章中，我将展示一些使用不同 CSS 属性在垂直和水平方向上居中图片的最常用方法。
我已经在上一篇文章中介绍了 CSS 定位和显示的属性。如果你不熟悉这些属性，建议你在阅读本文之前先查看这些文章。
这是一个视频版本的介绍。
水平定位一张图片我们先使用 3 个不同的 CSS 属性将图片水平居中。
Text-Align使图片水平居中的第一种方法是使用 text-align 属性。但是，仅当图片位于块级容器（例如
但是，单独使用 margin: auto 将不会生效。 如果需要使用 margin: auto，则还必须使用 2 个其他属性。
margin-auto 属性对内联级别的元素没有任何影响。由于 标签是一个内联元素，因此我们需要先将其转换为块级元素：
img {
margin: auto;
display: block;
}其次，我们还需要定义宽度。因此，左边距和右边距可以占用其余的空白空间，并自动对齐，这可以解决问题（除非我们将宽度设置为 100％）：
img {
width: 60%;
margin: auto;
display: block;
}Display: Flex将图片水平居中的第三种方法是使用 display: flex。就像我们对容器使用 text-align 属性一样，我们对容器也使用 display: flex。
但是，仅使用 display: flex 是不够的。容器还必须有一个 justify-content 属性：
div {
display: flex;
justify-content: center;
}
img {
width: 60%;
}justify-content 属性与 display: flex 一起使用，可以水平对齐图片。
最后，图片的宽度必须小于容器的宽度，否则，它将占用 100％ 的空间，然后我们就无法将其居中。
重要提示：较旧版本的浏览器不支持 display: flex 属性。请点击这里查看更多详细信息。
垂直居中图片Display: Flex对于垂直居中，使用 display: flex 非常方便。
考虑以下情况，我们的容器的高度为 800px，但是图片的高度仅为 500px：
div {
display: flex;
justify-content: center;
height: 800px;
}
img {
width: 60%;
height: 500px;
}在这种情况下，向容器添加一行代码，align-items: center，就可以了：
div {
display: flex;
justify-content: center;
align-items: center;
height: 800px;
}align-items 和 display: flex 一起用，可以垂直定位属性。
定位：Absolute & Transform 属性垂直对齐的另一种方法是一起使用 position 和 transform 属性。这个有点复杂，所以让我们一步一步地做。
1步骤 1：定义 Position Absolute首先，我们修改将图片的定位方式从 static 修改为 absolute：
div {
height: 800px;
position: relative;
background: red;
}
img {
width: 80%;
position: absolute;
}它应该位于相对定位的容器内，因此我们相对于其容器 div 添加 position: relative。
步骤 2：定义 Top & Left 属性其次，我们定义图片的顶部和左侧属性，并将其设置为 50％。这会将图片的起点从左上角移到容器的中心：
img {
width: 80%;
position: absolute;
top: 50%;
left: 50%;
}步骤 3：定义 Transform 属性但是第二步将图像部分移出了容器。因此，我们需要将其放回内部。
定义一个 transform 属性，并在其 X 和 Y 轴上添加 -50％，可以达到目的：
img {
width: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}还有其他方法可以使元素在水平和垂直方向上居中，但是我已经解释了最常见的方法。
希望本文能帮助你了解如何在页面中心对齐图片。
如果你想了解有关 Web 开发的更多信息，请随时访问我的 Youtube channel 以获取更多信息。
谢谢阅读！
原文：How to Center an Image Vertically and Horizontally with CSS，作者：Cem Eygi