How to Center an Image in CSS?

Let’s talk about one of those little things that somehow ends up driving people nuts: centering images in CSS.

Sounds simple, right? You’d think there’d just be one golden rule. But no—CSS likes to give you 17 ways to do the same thing. Depending on your layout, container, and how much caffeine you’ve had that day, some methods are better than others.

Over the years, I’ve tried pretty much all of them. Some are dead simple. Some are a bit clunky. Let me walk you through the five main ways I still use today.

1) Flexbox — My Go-To for Most Things

Honestly, Flexbox is like the Swiss Army knife of CSS layouts. If I’m building a new site today, there’s a 90% chance Flexbox is involved somewhere.

Here’s how you’d center an image with it:

Why I like it:

• Super easy to center both horizontally and vertically.

• Fully responsive out of the box.

• Plays nicely with complex layouts.

Small downside?

Sometimes feels like overkill if you’re just dropping in one centered image on a tiny marketing page. But if you’re already using Flexbox elsewhere (which, let’s be honest, you probably are), it’s a no-brainer.

Quick story:

Last year, I was building a landing page for a client using Webflow. The designer wanted hero images perfectly centred across all screen sizes. Flexbox handled it like a charm. Took me 5 minutes. Job done.

2) Grid — The Clean, Modern Alternative

If Flexbox is my Swiss Army knife, CSS Grid is like my power drill. When you’re working with full page layouts or multi-column sections, Grid can make centering ridiculously tidy.

Here’s the simple version:

Why Grid rocks:

• One-liner to center everything. Love it.

• Fantastic for grid-heavy or card-based designs.

• Feels really clean when you read the code later.

The catch?

Older browser support can still bite you if you’re dealing with ancient corporate systems. I had a client in 2022 still using IE11 (yep, they’re out there), so we had to skip Grid entirely for that project.

3) Absolute Positioning — Old School but Still Handy

Every now and then, you just need to smack something into the dead center of its parent. That’s where absolute positioning still has a place.

The trick is using a combo of top, left, and transform:

Why it works:

• Pixel-perfect control.

• Doesn’t depend on flex or grid containers.

• Useful for modals, popups, or fixed-size elements.

Downsides?

• Not responsive-friendly unless you’re careful.

• Can break layouts if the container’s size changes unexpectedly.

Real-life example:

I used this just last month when embedding a client’s brand logo dead-center in a full-page loading spinner. Because the spinner wasn’t responsive, absolute positioning was perfect.

4) Margin Auto — Dead Simple Horizontal Centering

Sometimes you don’t need all the bells and whistles. You just want that image smack in the middle, horizontally. That’s where margin: auto comes in handy.

Why I still use it:

• Brain-dead simple.

• No special containers required.

• Great for static content, blogs, and articles.

But:

It only works horizontally. No vertical centering unless you start nesting more wrappers, and then you may as well just use Flexbox.

5) Table Display — The Dinosaur That Won’t Die

Yep, this one’s old. Like, 2008-old. But in some weird edge cases (usually involving emails or old CMS platforms), table display still works.

Why bother?

• Works even in some ancient browsers.

• No extra transforms or flex/grid learning required.

Why I avoid it?

• Not semantic.

• Feels clunky in modern projects.

• If you’re starting fresh, just don’t. Use Flexbox or Grid.

So, Which One Should You Use?

Honestly? Depends entirely on your project.

• If you’re already using Flexbox, use Flexbox.

• If you’re building full layouts, Grid’s insanely tidy.

• If it’s one tiny fixed element, absolute positioning still has its place.

• If it’s a simple blog image, margin: auto does the trick.

• And if you’re stuck in some awful legacy system, table display might still save you.

Look, the key is knowing your toolbox. After 20 years of building sites for everyone from cafes to SaaS platforms, I’ve learned that “best practice” usually just means “whatever works for this particular mess.”