Free tools Windows power users keep installed
One-click scans. No signup required.
Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Use CSS, not an HTML alignment attribute, to center an image. For a standalone image, make it a block and set its inline margins to auto:
<img class="center-image" src="photo.jpg" alt="A mountain landscape at sunset">.center-image {
display: block;
max-width: 100%;
height: auto;
margin-inline: auto;
}HTML supplies the image and its alternative text; CSS controls its position. The max-width and height rules keep it from overflowing while preserving its aspect ratio.
Center an image horizontally with automatic margins
An <img> is inline by default. Automatic horizontal margins center a block-level box, so include display: block:
.center-image {
display: block;
margin-inline: auto;
}margin-inline: auto is the logical equivalent of margin-left: auto; margin-right: auto. It works when the image is narrower than its containing block and no other layout rule overrides it. If the image already fills the container, there is no extra space for visible margins.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
A complete responsive example is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Centered image</title>
<style>
.center-image {
display: block;
max-width: 100%;
height: auto;
margin-inline: auto;
}
</style>
</head>
<body>
<img class="center-image" src="photo.jpg"
alt="A mountain landscape at sunset"
width="1200" height="800">
</body>
</html>The width and height attributes describe intrinsic dimensions and help reserve layout space; they do not center the image. Always provide useful alt text, or use alt="" for a purely decorative image. See the MDN <img> reference for sizing and accessibility details.
Use text-align: center for inline content
Because an image is inline by default, its parent can center it as inline content:
<div class="image-wrapper">
<img src="photo.jpg" alt="A mountain landscape">
</div>.image-wrapper {
text-align: center;
}This is useful when the image should be centered alongside other inline content. It centers children inside the parent; it does not center the parent itself and does not provide vertical centering. For a standalone block image, display: block; margin-inline: auto states the intent more directly. Do not add both approaches without a specific reason. The W3C centering guide distinguishes inline-content centering from block centering.
Center an image horizontally and vertically
Vertical centering requires a parent with available height. Flexbox is a natural choice when the container is already a flex layout:
.image-container {
min-height: 300px;
display: flex;
justify-content: center;
align-items: center;
}With the default flex-direction: row, justify-content controls the horizontal main axis and align-items controls the vertical cross axis. Axes are not permanently “horizontal” and “vertical”: with flex-direction: column, the main axis is vertical, so horizontal centering normally uses:
.image-container {
display: flex;
flex-direction: column;
align-items: center;
}Grid offers a concise one-item solution:
.image-container {
min-height: 300px;
display: grid;
place-items: center;
}place-items aligns the grid item on both axes. A container whose height is only the image’s natural height has no spare vertical space, so centering will not appear. MDN explains the relevant Flexbox alignment, Flexbox axes, and Grid centering rules.
Center an image inside a fixed-size box
First decide whether the whole image must remain visible or may be cropped:
.image-box {
width: 100%;
height: 300px;
display: grid;
place-items: center;
overflow: hidden;
}
/* Keep the entire image visible */
.image-box img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
/* Fill the box, cropping when aspect ratios differ */
.image-box img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}Margins, Flexbox, and Grid position the <img> element in its parent. object-fit controls how the source image is resized inside that element’s box, while object-position: center controls which part is centered. They are separate operations.
Center an image with a caption
Use semantic <figure> and <figcaption> elements:
<figure class="centered-figure">
<img src="photo.jpg" alt="A mountain landscape at sunset">
<figcaption>Sunset in the highlands</figcaption>
</figure>.centered-figure {
max-width: 40rem;
margin-inline: auto;
text-align: center;
}
.centered-figure img {
display: block;
max-width: 100%;
height: auto;
margin-inline: auto;
}Browsers commonly give figure default margins, so setting its margin explicitly lets you control both centering and spacing.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Center linked images and galleries
If an image is inside a link, decide whether the clickable area should wrap only the image:
.image-link {
display: block;
width: fit-content;
margin-inline: auto;
}For several images, center the collection with the parent layout instead of centering each item independently:
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstall.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
gap: 1rem;
justify-items: center;
}Flexbox is another option:
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}Why margin: 0 auto may not work
- The image is still inline: add
display: block. - It is already full width: equal margins are zero; use a smaller width or a max-width.
- You targeted the wrong element: the wrapper may control alignment.
- A flex or grid parent is in charge: inspect its direction and alignment properties.
- The image is floated: remove or override
float. - A fixed width exceeds the container: add
max-width: 100%or reduce the width. - Another rule wins: use browser developer tools to inspect computed styles.
text-align: center likewise will not reliably center a block-level image, a flex item, or a grid item when those layout systems determine placement.
Best Value
Do not use obsolete HTML centering
Avoid:
<center><img src="photo.jpg" alt="Description"></center>
<img src="photo.jpg" align="center" alt="Description">The <center> element and the image align attribute are obsolete/deprecated presentation features. Use CSS instead, as documented by MDN.
Choose the method that matches the layout
| Goal | Use |
|---|---|
| One standalone image, horizontal | display: block; margin-inline: auto |
| Image with other inline content | Parent text-align: center |
| Both axes in a container | Flexbox or Grid with available height |
| Responsive natural-size image | max-width: 100%; height: auto |
| Fixed box, no crop | object-fit: contain |
| Fixed box, fill and crop | object-fit: cover |
| Image plus caption | <figure> and <figcaption> |
For ordinary centering, prefer Flexbox or Grid over absolute positioning. An absolutely positioned overlay can be centered with position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%), but the parent must be positioned, the image leaves normal flow, and overlaps and responsive height require extra handling.
Frequently Asked Questions
Can I center an image using only HTML?
Modern HTML provides the image structure, but CSS is the preferred mechanism for presentation. Use a class with display: block and margin-inline: auto.
Should I use text-align: center or margin: auto?
Use text-align: center on a parent when centering inline content with other inline items. Use block display plus automatic inline margins for a standalone image.
How do I keep a centered image responsive?
Add max-width: 100% and height: auto; this prevents overflow and preserves the intrinsic aspect ratio.
How do I center an image vertically?
Put it in a container with a meaningful height, then use Flexbox (align-items and justify-content) or Grid (place-items: center).
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →
