How to Center an Image in CSS

What You’ll Build or Solve

You’ll center an image horizontally inside its parent container using two methods. By the end, you’ll know which method to use based on whether the image behaves as an inline or block element.

When This Approach Works Best

Use this approach when you:

• Center a logo in a header or navigation bar.
• Center an image inside a card or content section.
• Center a standalone image in a page layout.

Avoid this approach when you need to position the entire container in the middle of the screen. That is a layout problem, not image centering.

Prerequisites

• Basic HTML and CSS
• A CSS file or <style> block

No additional setup is required.

Step-by-Step Instructions

Step 1: Center a Block Image with Auto Margins

This method centers the image as a block-level element.

<imgsrc="photo.jpg"class="centered"alt="Example image">

.centered {
  display:block;
  margin-left:auto;
  margin-right:auto;
}

margin-left: auto and margin-right: auto split the remaining horizontal space evenly, placing the image in the center.

What to look for: If the image does not move, it is probably still inline. Add display: block.

Step 2: Center an Inline Image with text-align

Images are inline by default. You can center an inline image by centering inline content in the parent container.

<divclass="container">
<imgsrc="photo.jpg"alt="Example image">
</div>

.container {
  text-align:center;
}

This works because inline elements follow the parent’s text-align rule.

What to look for: Apply text-align to the parent, not the image.

Examples You Can Copy

Example 1: Center a Logo in a Header

<headerclass="header">
<imgsrc="logo.png"alt="Logo"class="logo">
</header>

.logo {
  display:block;
  margin:0auto;
}

Example 2: Center an Inline Image Inside a Section

<divclass="content">
<imgsrc="icon.png"alt="Icon">
</div>

.content {
  text-align:center;
}

Example 3: Center an Image Inside a Card

<divclass="card">
<imgsrc="profile.jpg"alt="Profile photo"class="avatar">
</div>

.avatar {
  display:block;
  margin:0auto;
}

Common Mistakes and How to Fix Them

Mistake 1: Using Auto Margins Without Making the Image a Block

You might write:

img {
  margin:0auto;
}

Why it breaks: Inline images ignore horizontal auto margins.

Correct approach:

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

Mistake 2: Putting text-align on the Image

You might write:

img {
  text-align:center;
}

Why it breaks: text-align affects inline content inside an element, not the element itself.

Correct approach:

.parent {
  text-align:center;
}

Apply it to the parent container.

Mistake 3: Centering the Wrong Element

You might adjust margins on the parent container and wonder why the image stays left.

Why it happens: The image still follows its own inline or block rules.

Correct approach: Center the image using either auto margins (block method) or text-align (inline method), depending on its display behavior.

Troubleshooting

If the image refuses to center, check whether it is inline or block and choose the matching method.

If auto margins do nothing, confirm that display: block is set on the image.

If text-align does nothing, confirm it is applied to the parent element.

If the image appears off-center, check for extra padding or fixed widths on the parent that may affect visual balance.

Quick Recap

• Use display: block with left and right auto margins to center a block image.
• Use text-align: center on the parent to center an inline image.
• Choose the method based on how the image participates in layout.
• Apply centering to the correct element, the image for margins, and the parent for text-align.