The quick answer: text-align on the parent
An <img> is an inline element: it sits in a line of text like a word. So you center it the same way you center text, with text-align: center on its parent:
The style goes on the div, not on the image. Putting text-align: center on the <img> itself does nothing, because the image has no text inside it to align.
Method 2: display block and margin auto
If you would rather style the image itself, turn it into a block and give it automatic side margins. The free space on either side is split evenly:
The gray image has margin: 0 auto but stays at the start of the line: auto margins do nothing on an inline element. display: block is the missing piece. max-width: 100% with height: auto keeps the image from overflowing a narrow screen while preserving its proportions.
Method 3: flexbox or grid, including vertical centering
To center an image in both directions inside a box, give the box a height and center its content with grid or flexbox:
The flexbox equivalent is display: flex; justify-content: center; align-items: center;. Either way the box needs a height larger than the image, or there is no space to center in. The same methods center any element; the center a div page compares all of them.
Centering an image with a caption
A photo with a caption belongs in a <figure>. Center the figure's content, and the image and caption line up together:
Several images in a centered row
A row of logos or thumbnails is a flexbox job. justify-content: center centers the group, gap spaces it, and flex-wrap lets it wrap on small screens while staying centered:
Which method to use
| Situation | Use |
|---|---|
| An image in a paragraph or a simple block | text-align: center on the parent |
| You can only style the image | display: block; margin: 0 auto; |
| Center in both directions inside a box | Grid place-items: center (or flexbox) on the box |
| A row of images | Flexbox with justify-content: center |
| An image with a caption | <figure> with text-align: center |
| A background picture, not content | background-position: center, see background-image |
The old ways, and why not
You will still find these in old tutorials:
<!-- obsolete: do not use -->
<center><img src="logo.png" alt="Logo"></center>
<img src="logo.png" alt="Logo" align="center">
<center> and the align attribute were removed from HTML. Browsers still render <center> for backward compatibility, and align="center" on an image does not even center it horizontally: browsers treat it as a vertical alignment within the line. Use one of the CSS methods above.
Common mistakes
text-align: centeron the<img>. Put it on the parent.margin: 0 autoon an inline image. Adddisplay: block.- Vertical centering with no height on the parent. The box shrinks to the image, leaving no space to center in.
float: center. There is no such value. Floats only go to a side.- Forgetting
alt. A centered image still needs alt text; usealt=""only for purely decorative images. - A stretched image. Setting both
widthandheightin CSS to values with a different ratio distorts it. Set one and useheight: auto, or addobject-fit: cover.
Frequently Asked Questions
How do I center an image in HTML?
Put text-align: center on the element that contains it, for example <p style="text-align: center;"><img src="logo.png" alt="Logo"></p>. An image is inline by default, so it centers like a word of text.
How do I center an image with margin auto?
Make the image a block first: img { display: block; margin: 0 auto; }. Auto margins do not center inline elements, and an image is inline until you change it.
How do I center an image vertically and horizontally?
Make its container a grid (or flexbox) with a height: .box { display: grid; place-items: center; height: 300px; }. The image then sits in the middle of the box.
Can I use the <center> tag or align="center" to center an image?
No. <center> and the align attribute on <img> are obsolete in HTML5. Browsers still render <center> for old pages, but align="center" on an image aligns it vertically in the line, not horizontally. Use CSS.
Why is there a small gap under my centered image?
An inline image sits on the text baseline, leaving room below it for letter descenders. Set display: block on the image, or vertical-align: middle, and the gap disappears.
