Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →For horizontal centering, make the image a block and give it automatic side margins. To center it horizontally and vertically, put the alignment rules on the parent with Flexbox or Grid. These positioning rules are separate from deciding whether the image should be contained or cropped inside a fixed-size box.
Center an image horizontally
Use this pattern when the image should sit in the middle from left to right, but does not need vertical centering in a tall container:
<div class="container">
<img src="photo.jpg" alt="Description of the image">
</div>.container img {
display: block;
margin-inline: auto;
max-width: 100%;
}Images are inline elements by default. display: block enables the automatic horizontal-margin pattern, and margin-inline: auto divides leftover inline space equally on both sides. max-width: 100% keeps the image from becoming wider than its containing block.
This centers the image only on the horizontal axis. It does not place the image halfway down a taller parent.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Center an image on both axes with Flexbox
Use the parent as a flex container when the image must be centered horizontally and vertically:
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 16rem;
}With the default row direction, justify-content centers items along the horizontal main axis and align-items centers them along the vertical cross axis.
The parent needs available block-axis space for vertical centering to be visible. A min-height, fixed height, or another layout context that gives the container height provides that space. If the container is only as tall as the image, there is no extra vertical room to distribute.
Center an image on both axes with Grid
Grid offers a compact alternative:
.container {
display: grid;
place-items: center;
min-height: 16rem;
}place-items: center sets both the block and inline alignment of the grid item. As with Flexbox, vertical centering requires the parent to be taller than the image.
Recommended Free Tools
Choose the right centering method
| Method | Best fit | Limitation or decision |
|---|---|---|
display: block; margin-inline: auto |
Horizontal centering of one image | Does not vertically center an image in a tall parent |
| Parent Flexbox | Centering on both axes, especially when the parent already uses Flexbox | The parent needs available height for visible vertical centering |
Parent Grid with place-items: center |
Compact two-axis centering | The parent also needs available height for visible vertical centering |
Centering versus fitting or cropping the image
Centering positions the <img> element. It does not decide how the image pixels should fit inside that element when you use a fixed-size box.
For a thumbnail or media frame with a defined width and height, size the image element and then choose object-fit:
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
.container {
display: grid;
place-items: center;
width: 18rem;
height: 12rem;
}
.container img {
width: 100%;
height: 100%;
object-fit: contain;
}object-fit: contain
contain preserves the complete image while fitting it inside the image element’s box. If the image and box have different aspect ratios, unused space can remain around the image.
object-fit: cover
cover fills the image element’s box while preserving the image’s aspect ratio. When the aspect ratios differ, part of the image overflows and is cropped.
.container img {
width: 100%;
height: 100%;
object-fit: cover;
}Control the focal point of a crop
When cover cuts off important content, use object-position to move the visible focal point:
.container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}object-fit has no useful sizing effect unless the image element itself has a constrained width and height (or equivalent dimensions from its layout).
Quick Recap
Common fixes when centering does not work
- The image is still left-aligned: check that the image is
display: blockwhen using automatic margins, and apply the margins to the image itself. - Vertical centering appears ineffective: give the parent a height or minimum height larger than the image.
- The image overflows its parent: add
max-width: 100%for a responsive image, or explicitly size the image for a fixed box. - The image is centered but looks cropped: change
object-fit: covertocontainif showing the entire image matters more than filling the box. - The image is distorted: use
object-fit: containorcoveron a sized image instead of forcing unequal dimensions without an object-fit rule.
Complete examples
Responsive image centered horizontally
<div class="container">
<img src="photo.jpg" alt="Description of the image">
</div>.container img {
display: block;
margin-inline: auto;
max-width: 100%;
height: auto;
}Image centered in a tall panel
<div class="container">
<img src="photo.jpg" alt="Description of the image">
</div>.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 16rem;
}
.container img {
max-width: 100%;
height: auto;
}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.
