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

Syntax

css

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

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.

Note:

Accepted values:
margin: 0 auto — centers a block horizontally
margin-inline: auto — logical equivalent
display: block — required for images, which are inline by default
width — must be less than the container's width

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.

Note:

Accepted values:
text-align: center — centers inline content
text-align: left | right — other alignments
text-align: start | end — alignment that follows writing direction
text-align: justify — stretches lines
note: applies to the parent of an inline image, not the image
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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.

Note:

Accepted values:
display: flex — makes a flex container
justify-content: center — main axis centering
align-items: center — cross axis centering
height — the container needs a height to center vertically

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.

Note:

Accepted values:
position: absolute — takes it out of flow
top: 50%; left: 50% — moves the corner to the center
transform: translate(-50%, -50%) — pulls back by half its own size
position: relative — on the parent as the reference

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.

Note:

Accepted values:
display: grid — makes a grid container
place-items: center — centers on both axes
place-content: center — centers the whole grid
min-height — needed to center vertically

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>

Live Example

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

CSS Image Centering

Horizontal Centering with margin: auto

Centering with text-align

Flexbox Centering (Both Axes)

Absolute Positioning with transform

Grid Centering

Chapter Quiz — Complete all 22 topics to unlock

Login to run this code