Explore how to center an image with CSS

In web design, pictures are usually an integral part, and when the images do not meet the design specifications or are not centered, it may destroy the layout and aesthetics of the entire website. Therefore, how to center the image has become a noteworthy issue. There are various methods available in CSS to center an image horizontally and vertically. In this article, we’ll look at how to center an image with CSS.

1. Horizontal centering

1. margin:auto

Using margin:auto is a simple and commonly used method, which can center the image horizontally . This method sets the left and right values ​​of the margin attribute to auto (margin: 0 auto;), which can center the element horizontally in its container and is suitable for a single image.

The following code:

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

.wrapper {
  width: 300px;
  margin: 0 auto;
}

Use margin:auto to achieve horizontal centering. Here we set the left and right margins of the container wrapper to auto:

The following code:

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

Achieve horizontal centering by setting the margin of the image to 0 auto.

2. text-align:center

We can use text-align:center; to center images and other inline elements horizontally, but be aware that this method only works For the case where the image is placed inside the container.

The following code:

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

.wrapper {
  width: 300px;
  text-align: center;
}

By setting the text-align of the container wrapper to center, the included images are horizontally centered.

3. position:absolute and left:50%

Using this attribute, we set the style of the image to position:absolute and left:50% to make the image horizontal Centered. Next, we need to set the left margin (margin-left) of the image to half the width of the image itself (width/2). This method is suitable for situations where we only need to center the image horizontally and do not care about the height of the image.

The following code:

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

img {
  position: absolute;
  left: 50%;
  margin-left: -150px;
}

Determine the position of the picture by setting the position of the picture to absolute, left:50%, and then set margin-left to a negative number according to the actual width of the picture to center the picture horizontally .

2. Vertical centering

1. line-height

When the height of the image is equal to the line-height of the element, we can center the image in the container Centered vertically. This method is suitable for situations where there is only a single line of text.

The following code:

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
  <p>只有单行文本</p>
</div>

.wrapper {
  height: 200px;
  line-height: 200px;
  text-align: center;
}

Center the image vertically by setting the height and line-height of the container to the same value.

2. display:flex and align-items:center

Use display:flex and align-items:center to center images and other elements vertically in the container. This method is suitable for situations where there are multiple vertically centered elements (such as two pictures) in a container.

The following code:

<div class="wrapper">
  <img src="image1.jpg" alt="示例图片1">
  <img src="image2.jpg" alt="示例图片2">
</div>

.wrapper {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

By setting the display property of the container to flex, and using the align-items:center and justify-content:center properties, the image is centered horizontally and vertically in the container.

3. position:absolute and top:50%

With the position:absolute and top:50% properties, we can vertically center the image. Next, set margin-top to half the height of the image itself.

The following code:

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

.wrapper {
  position: relative;
  height: 200px;
}
img {
  position: absolute;
  top: 50%;
  margin-top: -50px;
}

By setting the position of the image to absolute, position: relative; the height of the wrapper container is set to 200px. Then set the top of the image to 50% to center the image vertically, and set the margin-top to half the height of the image to achieve vertical centering.

3. Horizontal and vertical centering

If we need to center the image horizontally and vertically, we can use other combinations of the above methods.

1. position:absolute, top:50% and left:50%

This method is the most commonly used method, use position:absolute, top:50% and The left:50% attribute can achieve simultaneous horizontal and vertical centering. This method works when you only need to center an image.

The following code:

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

.wrapper {
  position: relative;
  height: 200px;
}
img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

By setting the position and top and left properties of the image to 50%, horizontal and vertical centering is achieved. Next, use the transform property to move the image half the width and height to the upper left (i.e. translate(-50%,-50%)).

2. Use display:flex, justify-content and align-items

Using display:flex, justify-content and align-items attributes, we can make multiple images Also centered horizontally and vertically. This method is suitable for situations where multiple images are in the same row and need to be centered on the web page at the same time.

The following code:

<div class="wrapper">
  <img src="image1.jpg" alt="示例图片1">
  <img src="image2.jpg" alt="示例图片2">
</div>

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 200px;
}
img {
  margin: 5px;
}

By setting the display of the container to flex and using the justify-content and align-items properties, the image can be centered horizontally and vertically at the same time.

Conclusion

Centering images is one of the techniques often used in web design. When we have multiple images that need to be centered on a page, we must choose a suitable centering method. Horizontal centering can be achieved using margin , text-align and position properties, vertical centering can be achieved using line-height , display and position properties, and horizontal and vertical centering can also be achieved using a combination of these properties. Therefore, choosing the appropriate image centering method in web design can help us create a better user experience and better design style.

The above is the detailed content of Explore how to center an image with CSS. For more information, please follow other related articles on the PHP Chinese website!