CssHow-ToBeginner · 3 min read

How to Center Image in CSS: Simple and Effective Methods

To center an image horizontally in CSS, you can use display: block with margin: 0 auto on the image. Alternatively, use a container with display: flex and justify-content: center to center the image easily.

📐

Syntax

Here are common CSS patterns to center an image horizontally:

img { display: block; margin: 0 auto; } - Makes the image a block element and centers it by setting left and right margins to auto.
.container { display: flex; justify-content: center; } - Uses Flexbox on the container to center its child image.
.container { text-align: center; } - Centers inline images inside a container by aligning text center.

css

/* Center image using margin auto */
img {
  display: block;
  margin: 0 auto;
}

/* Center image using Flexbox on container */
.container {
  display: flex;
  justify-content: center;
}

/* Center image using text-align on container */
.container {
  text-align: center;
}

💻

Example

This example shows an image centered horizontally using Flexbox inside a container. The image will appear in the middle of the page horizontally.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Center Image Example</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
  }
  .container {
    display: flex;
    justify-content: center;
    border: 2px solid #333;
    padding: 20px;
    background: white;
  }
  img {
    max-width: 100%;
    height: auto;
  }
</style>
</head>
<body>
  <div class="container">
    <img src="https://via.placeholder.com/150" alt="Centered Image" />
  </div>
</body>
</html>

Output

A white box with a black border centered horizontally and vertically on a light gray background. Inside the box, a 150x150 placeholder image is centered horizontally.

⚠️

Common Pitfalls

Common mistakes when centering images include:

Not setting display: block on the image when using margin: 0 auto, so the image stays inline and margins don't center it.
Using text-align: center on the image itself instead of its container, which has no effect.
Forgetting to set the container's width or display properties properly when using Flexbox.

css

/* Wrong: margin auto on inline image does not center */
img {
  margin: 0 auto;
}

/* Right: make image block to center with margin auto */
img {
  display: block;
  margin: 0 auto;
}

📊

Quick Reference

Method	CSS Code	Notes
Margin Auto	img { display: block; margin: 0 auto; }	Simple, works for horizontal centering
Flexbox	.container { display: flex; justify-content: center; }	Centers any child horizontally, flexible layout
Text Align	.container { text-align: center; }	Works for inline images inside container

✅

Key Takeaways

Use display: block and margin: 0 auto on the image to center it horizontally.

Flexbox on the container with justify-content: center is a modern and flexible way to center images.

text-align: center works only if applied to the image's container, not the image itself.

Always check the display type of the image; inline images ignore margin auto centering.

Test your layout in the browser to confirm the image is centered as expected.