How to Center an Image in HTML?

You cannot center an image with HTML alone in modern browsers. The fastest valid way to center an image in an HTML page is to wrap the <img> tag in a block-level container and apply text-align: center, or to set the image to display: block with margin: 0 auto. For more layout control, use Flexbox or CSS Grid on the parent. The deprecated HTML <center> tag and align="center" attribute still render in browsers but are obsolete in HTML5 and should not be used in new code.

Why Centering an Image in HTML Matters

A centered image is the strongest layout cue for "look at this." Logos, hero banners, product shots, screenshots inside documentation, and signature visuals in marketing pages all rely on dead-centre placement to feel intentional. An off-centre image, even by a few pixels, is one of the first things a reader notices on a polished page.

Beyond aesthetics, centering matters because images are inline elements in HTML by default. That single technical detail is the reason most "my image won't center" questions exist: developers reach for margin: auto on the <img> and nothing happens, because margin: auto has no horizontal effect on inline elements. Understanding which centering method applies to the parent versus the image itself is the entire skill, and it is what the five methods below cover.

The Five Working Methods at a Glance

Every modern centering technique falls into one of five categories. Pick the row that matches your situation; full code examples for each follow below.

• text-align on the parent: the simplest, oldest, and most universally supported. One CSS rule on a wrapping <div>.
• margin: auto with display: block: applied directly to the <img>. Works without changing the markup beyond the image tag.
• Flexbox: display: flex; justify-content: center on the parent. Recommended for responsive layouts and for centering both axes.
• CSS Grid: display: grid; place-items: center on the parent. The shortest two-axis centering you can write.
• position: absolute + transform: the only method that works for overlays where the image must sit on top of other content.

For a deeper CSS-only treatment, including object-position, background-position, and aspect-ratio, see the complete CSS image centering guide.

Method 1 - text-align: center on the Parent (Simplest)

This is the shortest valid solution. Wrap the <img> in any block-level element such as a <div>, <section>, <figure>, or <p>, then apply text-align: center to the wrapper. The image is inline by default, so it inherits the parent's text alignment and renders dead-centre on the horizontal axis.

Example:

<div style="text-align: center;">
  <img src="banner.jpg" alt="Product banner" width="600">
</div>

When to use: single image, horizontal centering only, no layout complexity. Browser support: every browser ever shipped. Caveat: the rule also centers any other inline content inside the parent (text, spans, anchor tags), so don't apply it to a generic container that has body copy you want left-aligned.

Method 2 - margin: auto with display: block

Apply the styling to the image itself instead of the parent. The trick is the display: block declaration: without it, margin: auto has no horizontal effect, because auto margins do not apply to inline elements. With block display, the browser computes the leftover horizontal space in the parent and splits it evenly between the left and right margins.

Example (inline style):

<img src="logo.png" alt="Company logo"
     style="display: block; margin: 0 auto; max-width: 100%;">

Example (with a class):

<img src="logo.png" alt="Company logo" class="centered-image">

.centered-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

When to use: you control the image but not the surrounding markup, or you want the centering rule to travel with the image via a class. Browser support: universal. Caveat: changing the image to block strips it from inline text flow, so don't apply this if the image is meant to sit alongside text on the same line.

Method 3 - Flexbox (Best for Responsive Layouts)

CSS Flexbox centers on both axes with two CSS rules and is the recommended modern approach for hero sections, cards, and any container that needs to stay centered as it resizes. Set display: flex on the parent, then justify-content: center for the horizontal axis and align-items: center for the vertical axis.

Example (horizontal only):

<div class="flex-h">
  <img src="hero.jpg" alt="Hero illustration">
</div>

.flex-h {
  display: flex;
  justify-content: center;
}

Example (both axes, for a hero or modal):

.flex-both {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
}

When to use: the parent has a defined or viewport-based height, the image must stay centered as the container resizes, or you need to center the image alongside other Flex children. Browser support: all evergreen browsers since 2017, including Safari on iOS 9+.

Method 4 - CSS Grid (Shortest Two-Axis Centering)

CSS Grid offers the shortest two-axis centering syntax in modern CSS. The shorthand place-items: center sets both justify-items and align-items in one declaration, centering any child on both axes.

Example:

<div class="grid-center">
  <img src="banner.jpg" alt="Banner">
</div>

.grid-center {
  display: grid;
  place-items: center;
  min-height: 400px;
}

When to use: the parent is already a grid layout, or you want the most concise two-axis centering you can write. Caveat: place-items is a shorthand that not every legacy browser supports; use the long form justify-items: center; align-items: center if you need to support Edge 15 or older.

If you prefer a visual approach, a CSS Grid layout generator can preview rows, columns, and alignment before you paste the result into your HTML.

Method 5 - position: absolute + transform (For Overlays)

This is the only centering method that does not rely on the image being a child of a Flex or Grid container. It is the right answer for overlays, modal close icons, badge images that sit on top of other content, or any case where the image must be removed from normal document flow. The technique combines position: absolute with top and left set to 50%, then pulls the image back by half of its own dimensions using transform: translate(-50%, -50%).

Example:

<div class="overlay-parent">
  <img src="badge.png" alt="Featured badge" class="overlay-image">
</div>

.overlay-parent {
  position: relative;
  height: 300px;
}
.overlay-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

When to use: the image overlays another element, or you need pixel-perfect centering inside a positioned container. Caveat: the parent must have position: relative (or any non-static positioning), otherwise the image positions relative to the nearest positioned ancestor or the viewport.

Quick Comparison: Which Method to Pick

• One image, horizontal only, just need it done: Method 1 (text-align: center on the parent).
• Image needs to carry its own centering as a class: Method 2 (display: block; margin: 0 auto).
• Responsive hero or banner, both axes: Method 3 (Flexbox with justify-content + align-items).
• Shortest two-axis syntax: Method 4 (Grid with place-items: center).
• Overlay, badge, modal close icon: Method 5 (position: absolute + transform).

What About the <center> Tag and the align Attribute?

Older tutorials and legacy codebases sometimes show the <center> tag or the align="center" attribute on <img>:

<!-- Obsolete: do not use in new code -->
<center><img src="banner.jpg" alt="Banner"></center>
<img src="banner.jpg" alt="Banner" align="center">

Both are obsolete in HTML5. Browsers still render them for backwards compatibility, but HTML validators flag them, accessibility tools warn on them, and content management systems often strip them on save. Replace any occurrence in your codebase with one of the five CSS-based methods above.

Accessibility Tips for Centering Images

Screen readers do not see CSS positioning. From an accessibility standpoint, every one of the five centering methods above is equivalent: the assistive technology hears the alt attribute, not the layout. The accessibility work is in the HTML markup around the centering rule, not in choosing one centering method over another.

Always write a useful alt attribute. The alt text is what a screen reader announces and what search engines index. Describe what the image conveys, not what it looks like. A blank alt="" is the correct choice for purely decorative images.

<!-- Useful: describes the meaning -->
<img src="logo.png" alt="TestMu AI logo">

<!-- Useful: empty alt for decoration -->
<img src="divider.svg" alt="">

<!-- Avoid: meaningless filler -->
<img src="logo.png" alt="image">

Avoid position: absolute for interactive images. Method 5 (absolute + transform) removes the image from normal document flow. For static images this is fine. But if the image is wrapped in an anchor tag or used as a button, absolute positioning can shift the tab order so that the image is reached at an unexpected point during keyboard navigation. Prefer Flexbox or Grid (Methods 3 and 4) for interactive images.

Pair complex images with a longer description. For charts, diagrams, or screenshots that contain information the alt attribute cannot summarise in one sentence, link the image to a visually hidden description with aria-describedby:

The sr-only utility class hides the paragraph visually while keeping it available to assistive technologies. The centering rule on the parent does not need to change. For a full pre-launch audit of image accessibility, the web accessibility checklist covers the WCAG criteria that apply to images, captions, and alt text.

Cross-Browser Testing for Centered Images

The five centering methods above render consistently in every evergreen browser shipped since 2017. The real-world failures show up at the edges: older Safari versions on iOS, retina pixel-density quirks, mobile viewports that resize the parent below the image's intrinsic width, and webview inconsistencies inside in-app browsers (Instagram, TikTok, LinkedIn). Manual testing in Chrome DevTools rarely catches these.

Each browser uses its own rendering engine (Blink, Gecko, WebKit), and even within one engine, mobile and desktop builds can diverge. To verify a centered image holds up in production, cover at minimum:

• Chrome and Edge on Windows and macOS at 100 percent zoom, then 150 percent and 200 percent.
• Firefox on Windows and macOS, particularly for Flexbox and Grid layouts where edge-case alignment differs from Blink.
• Safari on macOS, iPad, and iPhone. WebKit handles min-height and vh units differently on iOS, which directly affects Flexbox two-axis centering.
• Android Chrome and Samsung Internet on at least one budget Android device. Samsung Internet ships with its own CSS quirks that Chrome does not reproduce.
• Mobile viewports at 320 px, 375 px, 414 px, and 768 px wide, to catch images that overflow their parent and break centering.

For local responsive checks, LT Browser previews your page on 50+ device viewports including custom resolutions. For full browser-and-OS coverage, run the same test plan against TestMu AI's real device cloud, which exposes 3,000+ real browser and device combinations, including current iOS Safari, Samsung One UI, and Android OEM webviews.

Debugging centering with DevTools. When a centered image refuses to center, the answer is almost always in the box model. Open DevTools (Ctrl+Shift+I, or Cmd+Option+I on macOS), select the image in the Elements panel, and check three things in order:

• Computed display value. If you used Method 2 and the image is still inline, your display: block declaration is being overridden by a later rule or a more specific selector.
• Parent width. If the parent has width: max-content or display: inline-block, there is no extra horizontal space for margins to consume, and the image cannot move.
• Image intrinsic size vs. parent. An image wider than its parent overflows. Add max-width: 100% on the image to constrain it before centering rules can take effect.

Chrome DevTools also offers a Flexbox and Grid inspector (the small "flex" or "grid" badge next to a parent element). Toggling alignment values from the inspector preview reveals exactly which rule is doing the centering work without rebuilding the page.

Fallbacks for Older Browsers

All five methods are safe in browsers released since 2017. If your audience analytics still show Internet Explorer 11 or pre-2017 mobile Safari traffic, stick to Method 1 (text-align: center) or Method 2 (margin: auto + display: block): both predate Flexbox and Grid and degrade safely. Avoid place-items shorthand for legacy support and use the long form justify-items: center; align-items: center instead.

For images that need to load different formats per browser, the <picture> element is the right wrapper. The centering rule still lives on the parent of <picture>:

<div style="text-align: center;">
  <picture>
    <source type="image/avif" srcset="hero.avif">
    <source type="image/webp" srcset="hero.webp">
    <img src="hero.jpg" alt="Hero illustration">
  </picture>
</div>

Browsers pick the first format they support, and the wrapper's text-align rule centers whichever image they render.

Common Mistakes and Troubleshooting

Most "my image won't center" support tickets resolve to one of four root causes. Walk through each of them before reaching for a new layout system.

• Applying margin: auto without display: block. The single most common centering bug. The <img> element is inline by default, and margin: auto has no horizontal effect on inline elements. The browser computes the auto margins as zero and leaves the image flush to the left edge of its parent. Fix it by adding display: block.
• Mixing two centering methods on the same element. Stacking text-align: center on the parent with margin: auto + display: block on the image is not "extra safe." The two rules operate at different layers of the box model and can produce off-by-one-pixel rendering differences between browsers, and they make the CSS harder to debug. Pick one method per centering job.
• Forgetting position: relative on the parent (Method 5). When you use absolute positioning to center an overlay, the image positions relative to its nearest positioned ancestor. If no ancestor has position: relative (or absolute/fixed/sticky), the image positions relative to the viewport instead of the intended container, often ending up centered to the wrong element entirely.
• Skipping cross-browser testing. A centered image in Chrome at 1920×1080 tells you nothing about the same image on iPhone Safari at 375 px wide, or on a budget Android device in Samsung Internet. Percentage widths, iOS Safari's vh handling with the address bar visible, and aspect-ratio mismatches all break "working" layouts on real devices.

For more layout patterns that build on the same techniques, see these HTML and CSS tricks and the deeper advanced CSS tricks and techniques guide.

Best Practices

• Pick one centering method per element. Mixing text-align: center with margin: auto + display: block creates two competing rules. Choose container-based centering OR direct image centering, not both.
• Use Flexbox or Grid for responsive layouts. Both stay centered automatically as the container resizes, without media queries. Reserve text-align and margin: auto for one-off images in static documents.
• Always declare width and height on the img tag. This prevents Cumulative Layout Shift (CLS) while the image loads, which is a Core Web Vitals metric.
• Add max-width: 100% on the image. An image wider than its parent overflows; constraining the max-width keeps the centering rules effective on narrow viewports.
• Verify on real devices, not just emulation. Browser DevTools emulation gets viewport size right but does not reproduce engine differences, font rendering, or OEM webview quirks.

Conclusion

Centering an image in HTML comes down to picking the right method for the situation. For a one-off horizontal centering, text-align: center on a wrapping <div> is the shortest valid answer. For images that need to carry their own rule, display: block with margin: 0 auto works. For responsive heroes and modals where the image must stay centered on both axes, Flexbox or Grid is the modern default. Reach for absolute positioning plus transform only when the image is an overlay.

Whichever method you choose, validate the result in real browsers and real devices before shipping. A centered image is only as good as its worst rendering, and the worst rendering is rarely the one on your development machine.

Frequently Asked Questions

What is the quickest way to center an image in HTML?

Wrap the img tag in a div and apply text-align: center to the div. This works because an img is an inline element by default and inherits text-align from its block-level parent. It is one line of CSS, supported in every browser since 1996, and is the right answer when you only need horizontal centering.

Why does margin: auto not center my image?

An img is rendered as an inline element by default, and margin: auto has no horizontal effect on inline elements. You must add display: block (or display: flex on the parent) so the browser treats the img as a block and computes the auto margins as the leftover horizontal space, splitting it evenly on the left and right.

How do you center an image in HTML without using CSS?

There is no pure-HTML way that is still valid. The <center> tag and the align="center" attribute on <img> centered images in older HTML but both were removed in HTML5 and should not be used. The minimum modern solution is one CSS rule, either text-align: center on the parent or display: block; margin: auto on the image.

Can I still use the <center> tag in HTML5?

Browsers still render the <center> tag for legacy reasons, but it is obsolete in the HTML5 specification and should not appear in new code. Linters, accessibility tools, and HTML validators will flag it. Replace it with a wrapping <div> styled with text-align: center or display: flex; justify-content: center.

How do I center an image both vertically and horizontally?

Use Flexbox on the parent: display: flex; justify-content: center; align-items: center with a defined height on the container. CSS Grid is the one-line alternative: display: grid; place-items: center. For absolute overlays, use position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) on the image.

Which centering method is best for responsive layouts?

Flexbox or CSS Grid. Both are responsive by design: the image stays centered as the container resizes without media queries. Flexbox is best when the image is the only or primary child; Grid is best when the image lives alongside other elements in a structured layout. Both are supported in every browser shipped since 2017.

How do I center an image inside a hero or banner section?

Give the hero container a fixed or viewport-based height (for example min-height: 60vh) and apply display: flex; justify-content: center; align-items: center to it. The image will sit dead-centre horizontally and vertically regardless of viewport size. Add object-fit: cover on the img if you also want it to fill the hero.

Does centering an image affect SEO or accessibility?

Centering does not affect SEO ranking directly, but using semantic HTML and an accurate alt attribute does. Screen readers ignore CSS positioning, so all five centering methods are equally accessible. Avoid centering with absolute positioning if the image is interactive, because that can break the natural tab order keyboard users rely on.

How do I make sure my centered image looks the same in every browser?

Modern centering techniques render consistently in Chrome, Firefox, Safari, Edge, and Opera. The risk is mobile rendering at unusual viewports, retina-vs-standard pixel ratios, and older Safari versions handling Flexbox edge cases differently. Verify your layout across browser and device combinations using a real device cloud such as TestMu AI before shipping.

What is the difference between centering an image with HTML versus CSS?

HTML alone has no functioning way to center an image since the <center> tag and align attribute are obsolete. CSS provides every modern centering method: text-align, margin auto, Flexbox, Grid, and transform. In practice, every centered image on a modern page is centered by CSS, even when the rule is written inline in the style attribute.

• How to Move an Image in HTML?
• How to Resize an Image in CSS?
• How to Make Images Responsive?
• Make Image Smaller in HTML
• How to Set a Background Image in HTML?