CSS Image Centering

Image Centering

Centering images in CSS depends on how the image is displayed and what you want to center:

• Center the image itself (horizontally)
• Center the image inside a fixed container (both horizontally and vertically)
• Center-crop an image inside a box (card images / thumbnails)

Most centering problems are solved by choosing the right method: text-align, margin: auto, flexbox, or grid.

Center an Inline Image

By default, <img> behaves like an inline element. To center it, center the inline content of the parent using text-align.

.wrapper {
  text-align: center;
}

<div class="wrapper">
  <img src="photo.jpg" alt="">
</div>

This is simple and works well when you only need horizontal centering.

Center a Block Image

If you set the image to display: block, you can center it with margin-left/right: auto.

.center-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 320px; /* optional */
}

This is the most common method for centering a standalone image.

Center an Image Inside a Container

To center an image inside a container both horizontally and vertically, use flexbox or grid.

Flexbox (recommended):

.frame {
  width: 360px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  border-radius: 14px;
}

.frame img {
  max-width: 100%;
  max-height: 100%;
}

Grid alternative:

.frame {
  display: grid;
  place-items: center;
}

Center-crop (card images): If you want the image to fill the box without distortion, use object-fit: cover.

.card-img {
  width: 360px;
  height: 220px;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
  display: block;
}

Summary

• Inline image: center using text-align: center on the parent.
• Block image: center using display: block and margin: auto.
• Inside a container: use flexbox (align-items/justify-content) or grid (place-items).
• For card thumbnails: use object-fit: cover + object-position: center.