How to Center an Image in CSS (5 Reliable Methods)

Type "center image css" into a search bar and you'll get a dozen answers that all sound right and half of them won't work for your layout. That's not because the advice is bad, it's because an <img> tag doesn't behave like a <div>. It's inline by default, which quietly breaks the most commonly copy-pasted fix before you've even hit save.

Here's the short version: an image is a replaced element with a default display value of inline, though its box behaves like inline-block because it has intrinsic width and height. That single fact is why margin: auto sometimes does nothing. It's also why text-align: center sometimes works great, and why the "right" technique depends on what's already happening in the surrounding layout.

This guide walks through every reliable way to center an image in CSS. That includes the one-line fix for most cases, the classic and modern horizontal techniques, Flexbox and Grid for full control over both axes, and absolute positioning for overlays. It also covers why your image might not be centering at all, since that's usually a five-minute fix once you know what to check.

The Quickest Way to Center an Image in CSS

For a standalone image that just needs to sit in the middle of its container, this is the fastest working combination:

html

css

Three things are doing the work here. display: block overrides the image's default inline behavior so it becomes a block-level box that occupies its own line. margin-inline: auto (the modern, direction-aware equivalent of margin: 0 auto) then splits whatever horizontal space is left over evenly between the left and right sides.

That last part is the one people miss: there has to be leftover space for auto to distribute. width: 100% combined with max-width: 400px means the image tries to be as wide as its container but is capped at 400px. On any container wider than 400px, that gap gives margin-inline: auto something to split.

Leave off max-width and the image simply renders at width: 100% instead. It then fills the entire container, so there's nothing left to center it within. The "centered" image just looks like a normal full-width image, because visually, it is one.

Center an Image Horizontally With CSS

To understand why some techniques work and others don't, it helps to know what an image does by default. According to MDN's documentation on the <img> element, an image is a replaced element with a display value of inline by default. Its dimensions, though, are governed by the image's own intrinsic size, which makes it behave like inline-block for layout purposes. Practically, that means an image sits in the flow of text like a very wide letter. Centering techniques built for block-level elements need a small adjustment before they'll apply to it.

The traditional approach, margin: 0 auto, is a block-level technique. It requires two things to actually move the image. First, a display: block (or inline-block, though block is more common). Second, a defined width or max-width that's smaller than the available space.

css

The other common approach, text-align: center, works differently and needs to be placed on the image's parent, not the image itself.

css

html

This works because text-align centers inline-level content within a block container, and an image is inline-level by default, so it qualifies. Putting text-align: center directly on the <img> tag does nothing useful, though. The property affects how an element aligns its own inline content, and an image has no text or inline children inside it to align. Its position is controlled by its parent's text-align, not its own.

The trade-off: text-align: center also centers any actual text sitting next to the image in that same container, which is sometimes exactly what you want and sometimes not. If the container needs to hold other left-aligned content alongside the centered image, margin: 0 auto on a block-level image is the more surgical choice.

Center an Image With Flexbox

Flexbox is the better fit once the image lives inside a component that already controls its own layout, like a card, a hero banner, or a profile widget. It centers the image without touching the image's own display value at all.

html

css

align-items: center centers the image along the cross axis. In a column-direction flex container like the one above, that's the horizontal axis, which is why align-items rather than justify-content is doing the horizontal centering here. If the container is left as the default flex-direction: row, justify-content: center handles horizontal centering instead, and align-items: center takes care of vertical centering. Swapping which property does which job is one of the most common Flexbox mix-ups, and it's worth double-checking flex-direction any time the centering seems to land on the wrong axis.

Center an Image With CSS Grid

Grid solves the same problem in fewer declarations, particularly useful when the image is the only thing that needs centering inside its container:

css

place-items: center is shorthand for align-items and justify-items together, centering the grid item on both axes in a single line, without needing to know which axis is "main" or "cross" the way Flexbox requires.

Grid tends to be the better fit once the surrounding layout involves actual rows and columns, like a photo gallery, rather than a single image sitting alone in a wrapper. For one image with no other layout requirements, Flexbox and Grid are functionally interchangeable, so the choice usually comes down to whatever method the rest of the component already uses. Vertical centering with either method still needs the parent to have real height to center within. A container with height: auto and no content to define its size has nothing to center the image against vertically.

Keep a Centered Image Responsive

A centered image that overflows its container on a smaller screen isn't actually finished. The standard fix pairs a flexible maximum width with an automatic height:

css

max-width: 100% stops the image from ever exceeding the width of its parent, regardless of the image's actual file dimensions. height: auto then lets the browser scale the height proportionally as the width shrinks, which keeps the image's aspect ratio intact instead of stretching or squashing it.

That's the difference between a fixed width and a flexible max-width in practice. A fixed pixel width, like width: 800px, stays 800px even on a 375px-wide phone screen, forcing horizontal scroll or an overflow clip. max-width: 100% scales down gracefully instead, capping the image at its natural size or the container's size, whichever is smaller.

Center an Image Both Horizontally and Vertically

Horizontal and vertical centering are genuinely separate problems, and it's worth treating them that way instead of hoping one technique quietly handles both. A horizontal-only fix, like margin-inline: auto, has no vertical component at all. Giving an element top-and-bottom margins of auto does nothing unless the parent is already a flex or grid container.

Flexbox handles both axes at once when the image sits inside a section that has real height:

css

Grid does the same job with less code:

css

min-height matters more than it looks like it should. A fixed height: 100vh clips anything taller than the viewport, while min-height: 100vh lets the section grow if the image (or any sibling content) needs more room. Either way, the parent needs a real, non-zero height for vertical centering to have any space to work with. Centering something inside a container that's only as tall as its content is a contradiction the browser can't resolve.

Center an Image With Absolute Positioning

Absolute positioning is the right tool when an image needs to break out of the normal page flow entirely, most often for overlays, badges, watermarks, or an image layered on top of other content.

html

css

top: 50% and left: 50% place the image's top-left corner at the exact center of its containing block. transform: translate(-50%, -50%) then pulls it back by half of its own width and height, landing it precisely centered no matter what size the image actually is. This is the one technique on this list that works without knowing the image's dimensions in advance.

For this to behave correctly, .card needs position: relative. An absolutely positioned element sizes and positions itself against the nearest ancestor with a position value other than static, its containing block. Skip that step, and the image centers against the entire page instead of the card it's supposed to sit inside.

For normal, in-flow content, though, absolute positioning is usually more than the job needs. It pulls the image out of the document flow completely, which means it stops taking up space and can end up overlapping surrounding text or elements that weren't expecting it. Flexbox or Grid centers an in-flow image with far less risk of that kind of layout collision.

Why Is My Image Not Centering?

Most centering failures trace back to one of a handful of causes. Work through these in order before assuming the technique itself is broken:

Which CSS Method Should You Use to Center an Image?

None of these is the universally "correct" one. The right pick depends on three things: whether the parent already controls layout, whether the image needs to stay in the document flow, and whether it needs to break out of that flow entirely. Layout-controlled parents favor Flexbox or Grid. In-flow images favor margin or text-align. Anything that needs to sit outside normal flow, like an overlay, calls for absolute positioning.

Common Mistakes When Centering Images in CSS

• Applying text-align: center directly to the <img> tag instead of its parent, where it has no effect.

• Adding margin: auto without first setting display: block, so the image never leaves its inline default.

• Setting an image to width: 100% and then wondering why margin: auto isn't visibly doing anything, there's no leftover space to distribute.

• Assuming horizontal centering automatically handles vertical centering too; they're separate problems with separate fixes.

• Forgetting max-width: 100% and height: auto, so a centered image still overflows on smaller screens.

• Reaching for absolute positioning on ordinary in-flow content, which pulls the image out of the layout and risks overlapping other elements.

FAQ About Centering Images in CSS

What is the easiest way to center an image in CSS?

For a single, standalone image, display: block combined with margin-inline: auto (or the older margin: 0 auto) is the simplest reliable fix, as long as the image has a width or max-width smaller than its container.

How do I center an image horizontally in CSS?

Give the image a display: block and a constrained width, then apply margin-inline: auto. Alternatively, apply text-align: center to the image's parent and leave the image's own display value untouched.

How do I center an image vertically in CSS?

Vertical centering needs the parent to have defined height. Set the parent to display: flex with align-items: center, or display: grid with place-items: center, and give the parent a height or min-height.

Why is margin: auto not centering my image?

Almost always one of two reasons: the image is still display: inline (its default), or it has no constrained width and is already filling all available horizontal space. Fixing either one usually resolves it.

Should I use Flexbox or Grid to center an image?

Either works equally well for centering a single image. Flexbox tends to fit naturally when the parent already manages a one-dimensional layout, like a card or nav bar; Grid is a better fit once the surrounding layout involves real rows and columns.

The Short Version

Centering an image in CSS comes down to remembering one fact: an <img> is inline by default, unlike a <div>, which changes which techniques apply out of the box. display: block plus margin-inline: auto handles the simple standalone case. text-align: center on the parent works without touching the image's display value at all. Flexbox and Grid take over once the parent already controls layout or when both axes need centering, and absolute positioning with transform is reserved for overlays and layered content that needs to break out of normal flow. Whichever method fits, pair it with max-width: 100% and height: auto so it holds up on smaller screens too.

For the same set of problems applied to <div> elements and other blocks, see How to Center a Div in CSS. For a deeper comparison of when Flexbox and Grid each make more sense, see CSS Flexbox vs. Grid: When to Use Each.