How to Center an Image in HTML

What you’ll build or solve

You’ll center an image horizontally on a page or inside a layout container.

When this approach works best

This approach works best when an image is part of the layout and you want consistent alignment without manual spacing.

Use it when you:

• Center a logo in a header or footer.
• Center a product photo inside a card.
• Center an illustration in a hero section.

Skip this approach when:

• The image needs to sit inline with text like an icon. Use inline alignment instead.
• You want the image to fill and crop inside a fixed box. Centering won’t handle cropping on its own.

Prerequisites

• A text editor and a browser.
• An HTML file with an image you can target.
• Basic comfort editing CSS, inline, internal, or external.

Step-by-step instructions

Step 1: Center a standalone image with display: block and auto margins

An <img> is inline by default, so auto margins won’t center it unless you make it a block element.

<imgclass="logo"src="images/logo.png"alt="Mimo logo">

<style>
  .logo {
    display:block;
    margin-left:auto;
    margin-right:auto;
  }
</style>

Best-practice note:

If the image can overflow on small screens, add max-width: 100% and height: auto so it can shrink with its container.

<style>
  .logo {
    display:block;
    margin-left:auto;
    margin-right:auto;
    max-width:100%;
    height:auto;
  }
</style>

What to look for:

If the image stays left-aligned, another CSS rule may override display or margin.

Step 2: Center an image inside a container using Flexbox

Flexbox is the most common choice when the image lives inside a section, card, column, or layout grid.

<divclass="card">
<imgclass="photo"src="images/shoes.jpg"alt="Black running shoes">
</div>

<style>
  .card {
    display:flex;
    justify-content:center;
  }
</style>

If you also want vertical centering inside a fixed-height container, add align-items: center and give the container a height.

<style>
  .card {
    display:flex;
    justify-content:center;
    align-items:center;
    height:220px;
  }
</style>

Best-practice note:

Add max-width: 100% and height: auto to the image if it can be larger than the container.

<style>
  .photo {
    max-width:100%;
    height:auto;
  }
</style>

What to look for:

If vertical centering does nothing, the container likely has no height. Add height or padding.

Examples you can copy

Example 1: Center a logo at the top of a page

<header>
<imgclass="logo"src="images/logo.png"alt="Mimo logo">
</header>

<style>
  .logo {
    display:block;
    width:140px;
    max-width:100%;
    height:auto;
    margin-left:auto;
    margin-right:auto;
  }
</style>

Example 2: Center a product image inside a card

<divclass="product-card">
<imgclass="product-photo"src="images/mug.png"alt="Ceramic mug with a blue glaze">
<h2>Blue Glaze Mug</h2>
<p>Hand-finished ceramic, dishwasher safe.</p>
</div>

<style>
  .product-card {
    width:280px;
    padding:16px;
    border:1pxsolid #ddd;
  }

  .product-photo {
    display:block;
    max-width:100%;
    height:auto;
    margin:0auto12px;
  }
</style>

Example 3: Center an image both horizontally and vertically in a hero section

<sectionclass="hero">
<imgclass="hero-image"src="images/phone.png"alt="A phone showing a learning app screen">
</section>

<style>
  .hero {
    height:320px;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:16px;
  }

  .hero-image {
    max-width:90%;
    height:auto;
  }
</style>

Common mistakes and how to fix them

Mistake 1: Using text-align: center on the image itself

What you might do:

<imgstyle="text-align:center"src="images/logo.png"alt="Mimo logo">

Why it breaks:

text-align affects inline content inside a container, not the image element itself.

Correct approach:

Center with auto margins as a block image, or center from the parent with Flexbox.

<imgclass="logo"src="images/logo.png"alt="Mimo logo">

<style>
  .logo {
    display:block;
    margin:0auto;
  }
</style>

Mistake 2: Adding margin: 0 auto but leaving the image inline

What you might do:

<imgclass="photo"src="images/shoes.jpg"alt="Black running shoes">

<style>
  .photo {
    margin:0auto;
  }
</style>

Why it breaks:

Auto horizontal margins don’t center inline elements.

Correct approach:

Make the image a block element or use Flexbox on the parent.

<imgclass="photo"src="images/shoes.jpg"alt="Black running shoes">

<style>
  .photo {
    display:block;
    margin:0auto;
  }
</style>

Mistake 3: Setting a fixed width that overflows on smaller screens

What you might do:

<imgclass="hero"src="images/mountains.webp"alt="A mountain trail at sunrise">

<style>
  .hero {
    width:900px;
  }
</style>

Why it breaks:

On smaller screens, the image can overflow its container, even if it’s centered.

Correct approach:

Keep the fixed width only if you also allow shrinking with max-width: 100%.

<imgclass="hero"src="images/mountains.webp"alt="A mountain trail at sunrise">

<style>
  .hero {
    width:900px;
    max-width:100%;
    height:auto;
    display:block;
    margin:0auto;
  }
</style>

Troubleshooting

• If margin: 0 auto doesn’t work, confirm the image is display: block.
• If centering works in one place but not another, a more specific CSS selector may be overriding your rule.
• If Flexbox vertical centering fails, the container likely has no height. Add padding, min-height, or a fixed height.
• If the image looks centered but still feels off, the file may include extra transparent padding. Crop the image asset.
• If the image overflows on mobile, add max-width: 100% and height: auto to the image.

Quick recap

• Center a standalone image with display: block and margin: 0 auto.
• Center an image inside a container with Flexbox and justify-content: center.
• Add align-items: center for vertical centering when the container has height.
• Prevent overflow by adding max-width: 100% and height: auto as needed.