How to Center an Image in CSS

To center one image horizontally in normal block layout, make it a block and give its inline margins the available space:

img {
  display: block;
  margin-inline: auto;
}

For centering inside a container on both axes, put the alignment on the parent: use Flexbox with justify-content and align-items, or Grid with place-items: center. The container needs available space on each axis for the alignment to be visible.

1. Center an image horizontally

Use this pattern when the image is in ordinary block flow and should sit in the middle of its containing block:

<img class="centered-image" src="photo.jpg" alt="A mountain lake">

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

display: block removes the image from inline text flow. The automatic inline margins share any remaining horizontal space equally. max-width: 100% prevents an image wider than its container from overflowing; height: auto preserves its proportions as it scales.

This centers horizontally only. It does not place the image in the vertical middle of a taller area.

2. Center an image in a div on both axes

When the image belongs in the center of a region, make the div the layout container.

Flexbox

<div class="image-frame">
  <img src="photo.jpg" alt="A mountain lake">
</div>

.image-frame {
  min-height: 16rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-frame img {
  max-width: 100%;
  height: auto;
}

Flexbox aligns items on two axes: justify-content aligns along the main axis and align-items along the cross axis. With the default flex-direction: row, the main axis is horizontal and the cross axis is vertical. If you change the direction, those physical directions change too.

Grid

.image-frame {
  min-height: 16rem;
  display: grid;
  place-items: center;
}

.image-frame img {
  max-width: 100%;
  height: auto;
}

Grid’s place-items: center centers items in both alignment directions. Use place-self: center when the parent is already a grid and only this image needs alignment.

3. Choose the right CSS pattern

Need	Use	Set it on
Horizontal centering in normal block flow	`display: block; margin-inline: auto;`	The image
Center the child along both Flexbox axes	`justify-content: center; align-items: center;`	The flex parent
Center grid items both ways	`place-items: center;`	The grid parent
Center only one item in an existing grid	`place-self: center;`	The image

For Flexbox, choose properties by axis, not by whether you want a visually horizontal or vertical result: justify-content follows the main axis and align-items follows the cross axis. Grid’s place-items is shorthand for align-items and justify-items. justify-items is not implemented for Flexbox; use Flexbox’s container alignment properties instead. See MDN’s Flexbox box alignment guide and place-items reference.

4. Why is margin auto not centering my image?

The image is still inline. The auto-margin block pattern needs the image to participate as a block. Add display: block.
The image fills the available width. If its rendered width equals the containing block’s width, there is no remaining space for margins to distribute, so it looks unchanged. Give it a smaller width or let its intrinsic width remain smaller.
You expected vertical centering. Inline auto margins center horizontally in block flow. Use a flex or grid parent for two-axis alignment.
The alignment is on the wrong element. Flex alignment belongs on the flex container; Grid’s place-items belongs on a grid container.
The container has no extra height. A parent that is only as tall as the image has no visible vertical space in which to center it. Set a meaningful height or minimum height where the design calls for one.
You used justify-items with Flexbox. It does not provide Flexbox alignment. Use justify-content and align-items on the flex parent.

MDN explains that block-layout auto margins absorb available space, which is why equal inline margins center a block when room remains: CSS margin reference.

5. Responsive and layout edge cases

Large images: pair centering with max-width: 100%; height: auto if the image should shrink to fit its parent.
Flex direction: in a column flex container, the main axis is vertical, so justify-content controls vertical placement and align-items controls horizontal placement.
Multiple children: Flexbox and Grid parent alignment affects all relevant children. If only one grid item should move, use place-self.
Writing modes: margin-inline uses logical inline sides, which adapt to the writing mode. This is useful when layouts support right-to-left or vertical writing.
Inline image in text: if the image is intentionally part of a line of text, do not switch it to block solely to center it; choose an alignment approach that matches the surrounding layout.
Several items in a container: distinguish aligning items within their own area from distributing the container’s tracks or content. Choose the parent layout rule that matches the intended result.

6. Troubleshooting checklist

Inspect the image’s computed display and its containing block.
Check whether the parent is actually display: flex or display: grid before relying on parent alignment properties.
Check the rendered image width against the container width; centering is invisible when there is no free horizontal space.
Check the relevant axis. Flexbox’s main and cross axes depend on flex-direction; horizontal auto margins do not solve vertical alignment.
Give the parent usable height if vertical centering is required.
Remove conflicting width, margin, or alignment rules from more specific CSS selectors, or inspect which declaration wins in the browser’s computed styles.

7. Performance, reliability, and cost

These CSS alignment patterns use browser layout and require no screenshot service or extra JavaScript. Their visible result depends on the container’s dimensions, the image’s rendered size, and the parent layout mode. For responsive pages, constrain oversized images and reserve enough container space for the intended alignment.

8. Or skip the browser setup

If you need an image of the finished page rather than CSS alignment code, ScreenshotNeo is a website screenshot API and MCP server. The one-call API returns an image or PDF, and its parameters use names also used by other screenshot APIs. See the ScreenshotNeo documentation.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo accepts cookie banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. Sign up for 1,000 free screenshots a month, with no card required.

9. FAQ

How do I center an image horizontally?

In block flow, use display: block; margin-inline: auto; on the image, provided it is narrower than its containing block.

How do I center an image vertically?

Use a flex or grid parent and give that parent height beyond the image’s own height. For example, use display: grid; place-items: center;.

Can I center an image with Flexbox?

Yes. Set display: flex on its parent, then use justify-content: center and align-items: center for both axes with the default row direction.

What does `place-items: center` do?

It sets both item-alignment properties to center in a grid container.