水平居中和垂直居中css_如何使用CSS将图像垂直和水平居中

水平居中和垂直居中css

There are many ways to align HTML elements with CSS. One of the most common things developers struggle with is trying to center an element in the middle of the page.

有许多方法可以将HTML元素与CSS对齐。 开发人员遇到的最常见的事情之一就是尝试将元素放在页面中间。

So in this post, I will be showing some of the most common ways to center an image both vertically and horizontally using different CSS properties.

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

I've gone over the CSS Position and Display properties in my previous post. If you you're not familiar with those properties,  I recommend checking out those posts before reading this article.

我已经在上一篇文章中介绍了CSS Position和Display属性。 如果您不熟悉这些属性，建议您在阅读本文之前先查看这些文章。

水平居中 (Centering an Image Horizontally)

Let's begin with centering an image horizontally by using 3 different CSS properties.

让我们开始使用3个不同CSS属性将图像水平居中。

文字对齐 (Text-Align)

The first way to center an image horizontally is using the text-align property. However, this method only works if the image is inside a block-level container such as a <div>:

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

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

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

保证金：自动 (Margin: Auto)

Another way to center an image is by using the margin: auto property (for left-margin and right-margin).

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

However, using margin: auto alone will not work for images. If you need to use margin: auto, there are 2 additional properties you must use as well.

但是，使用margin: auto单独margin: auto将不适用于图像。 如果您需要使用margin: auto ，那么还必须使用2个其他属性。

The margin-auto property does not have any effects on inline-level elements. Since the <img> tag is an inline element, we need to convert it to a block-level element first:

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

img {
  margin: auto;
  display: block;
}

Secondly, we also need to define a width. So the left and right margins can take the rest of the empty space and  auto-align themselves, which does the trick (unless we give it a width of 100%):

其次，我们还需要定义宽度。 因此，左边距和右边距可以占用其余的空白空间并自动对齐，这可以解决问题(除非我们将宽度设置为100％)：

img {
  width: 60%;
  margin: auto;
  display: block;
}

显示方式：Flex (Display: Flex)

The third way to center an image horizontally is by using display: flex. Just like we used the text-align property for a container, we use display: flex for a container as well.

使图像水平居中的第三种方法是使用display: flex 。 就像我们对容器使用text-align属性一样，我们对容器也使用display: flex 。

However, using display: flex alone will not be enough. The container must also have an additional property called justify-content:

但是，仅使用display: flex是不够的。 容器还必须具有一个称为justify-content的附加属性：

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

img {
  width: 60%;
}

The justify-content property works together with display: flex, which we can use to center the image horizontally.

justify-content属性与display: flex一起使用，可用于水平justify-content图像。

Finally, the width of the image must be smaller than the width of the container, otherwise, it takes 100% of the space and then we can't center it.

最后，图像的宽度必须小于容器的宽度，否则，它将占用100％的空间，然后我们将其居中。

Important: The display: flex property is not supported in older versions of browsers. See here for more details.

重要：较旧版本的浏览器不支持display: flex属性。 有关更多详细信息， 请参见此处 。

垂直居中放置图像 (Centering an Image Vertically)

显示方式：Flex (Display: Flex)

For vertical alignment, using display: flex is again really helpful.

对于垂直对齐，请使用display: flex再次很有帮助。

Consider a case where our container has a height of 800px, but the height of the image is only 500px:

考虑以下情况，我们的容器的高度为800px，但是图像的高度仅为500px：

div {
  display: flex;
  justify-content: center;
  height: 800px;
}

img {
  width: 60%;
  height: 500px;
}

Now, in this case, adding a single line of code to the container, align-items: center, does the trick:

现在，在这种情况下，向容器添加一行代码， align-items: center ，就可以了：

div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 800px;
}

The align-items property can position elements vertically if used together with display: flex.

如果align-items属性与display: flex一起使用，则可以将元素垂直align-items 。

位置：绝对和变换属性 (Position: Absolute & Transform Properties)

Another method for vertical alignment is by using the position and transform properties together. This one is a bit complicated, so let's do it step by step.

垂直对齐的另一种方法是一起使用position和transform属性。 这有点复杂，所以让我们逐步进行。

步骤1：定义绝对位置 (Step 1: Define Position Absolute)

Firstly, we change the positioning behavior of the image from static to absolute:

首先，我们将图像的定位行为从static更改为absolute ：

div {
  height: 800px;
  position: relative;
  background: red;
}

img {
  width: 80%;
  position: absolute;
}

Also, it should be inside a relatively positioned container, so we add position: relative to its container div.

同样，它应该位于相对定位的容器内，因此我们添加position: relative于其容器div。

步骤2：定义顶部和左侧属性 (Step 2: Define Top & Left Properties)

Secondly, we define the top and left properties for the image, and set them to 50%. This will move the starting point(top-left) of the image to the center of the container:

其次，我们定义图像的顶部和左侧属性，并将其设置为50％。 这会将图像的起点(左上角)移到容器的中心：

img {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
}

步骤3：定义变换属性 (Step 3: Define the Transform Property)

But the second step has moved the image partially outside of its container. So we need to bring it back inside.

但是第二步将图像部分移出了容器。 因此，我们需要将其放回内部。

Defining a transform property and adding -50% to its X and Y axis does the trick:

定义一个transform属性并在其X和Y轴上添加-50％可以达到目的：

img {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

There are other ways to center things horizontally and vertically, but I've explained the most common ones. I hope this post helped you understand how to align your images in the center of the page.

还有其他方法可以使事物在水平和垂直方向上居中，但是我已经解释了最常见的方法。 希望本文能帮助您了解如何在页面中心对齐图像。

If you want to learn more about Web Development, feel free to visit my Youtube Channel for more.

如果您想了解有关Web开发的更多信息，请随时访问我的Youtube频道以获取更多信息。

Thank you for reading!

感谢您的阅读！

翻译自: https://www.freecodecamp.org/news/how-to-center-an-image-in-css/

水平居中和垂直居中css