许多开发人员在处理图片时会遇到困难。处理响应式和对齐特别困难,尤其是将图片居中在页面中间。

因此,在这篇文章中,我将展示一些使用不同 CSS 属性在垂直和水平方向上居中图片的最常用方法。

我已经在上一篇文章中介绍了 CSS 定位显示的属性。如果你不熟悉这些属性,建议你在阅读本文之前先查看这些文章。

这是一个视频版本的介绍

水平定位一张图片

我们先使用 3 个不同的 CSS 属性将图片水平居中。

Text-Align

使图片水平居中的第一种方法是使用 text-align 属性。但是,仅当图片位于块级容器(例如 <div>)中时,此方法才有效:

<style>
  div {
    text-align: center;
  }
</style>

<div>
  <img src="your-image.jpg">
</div>

Margin: Auto

使图片居中的另一种方法是使用 margin: auto 属性(用于左边距和右边距)。

但是,单独使用 margin: auto 将不会生效。 如果需要使用 margin: auto,则还必须使用 2 个其他属性。

margin-auto 属性对内联级别的元素没有任何影响。由于 <img> 标签是一个内联元素,因此我们需要先将其转换为块级元素:

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-itemsdisplay: flex 一起用,可以垂直定位属性。

定位:Absolute & Transform 属性

垂直对齐的另一种方法是一起使用 positiontransform 属性。这个有点复杂,所以让我们一步一步地做。

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