CSS Image Centering

Centering an image sounds trivial until you actually need to do it — the right technique depends on whether you're centering horizontally only, or both horizontally and vertically inside a box of known or unknown height.

In this page:

Horizontal Centering with margin: auto
Centering with text-align
Flexbox Centering (Both Axes)
Absolute Positioning with transform
Grid Centering

Horizontal Centering with margin: auto

A block-level image (display: block, which images aren't by default) with a fixed width and margin: 0 auto centers itself horizontally within its containing block — this is the oldest and simplest centering technique and still the right tool for basic cases.

Example: Horizontal Centering with margin: auto

css

<style>
img {
  display: block;
  width: 150px;
  margin: 0 auto;
}
</style>
<img src="https://placehold.co/150x100" alt="Centered">

Centering with text-align

If an image is left as its default inline/inline-block display, wrapping it in a block-level parent with text-align: center centers it horizontally the same way it would center a line of text, without needing to touch the image's own display or margin.

Example: Centering with text-align

css

<style>
.wrap {
  text-align: center;
}
</style>
<div class="wrap">
  <img src="https://placehold.co/150x100" alt="Centered like a line of text">
</div>

Flexbox Centering (Both Axes)

Setting display: flex on a container along with justify-content: center and align-items: center centers its image child on both axes at once, and works regardless of whether the image's or container's exact dimensions are known ahead of time.

Example: Flexbox Centering (Both Axes)

css

<style>
.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
}
</style>
<div class="wrap">
  <img src="https://placehold.co/100x80" alt="Centered on both axes">
</div>

Absolute Positioning with transform

Positioning an image absolutely at top: 50%; left: 50% moves its top-left corner to the container's center, and adding transform: translate(-50%, -50%) then shifts it back by exactly half its own size — perfectly centering it without flexbox or grid.

Example: Absolute Positioning with transform

css

<style>
.wrap {
  position: relative;
  height: 150px;
}
img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
<div class="wrap">
  <img src="https://placehold.co/100x80" alt="Centered without flexbox">
</div>

Grid Centering

A single-cell CSS Grid container with place-items: center centers its image child on both axes in one declaration, functionally equivalent to the flexbox approach but often considered more concise for this specific single-item case.

Example: Grid Centering

css

<style>
.wrap {
  display: grid;
  place-items: center;
  height: 150px;
}
</style>
<div class="wrap">
  <img src="https://placehold.co/100x80" alt="Centered in one declaration">
</div>

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Image Modal Next Lesson → CSS Image Shapes