HTML Align HTML Images
Getting an image to sit exactly where you want it inside a box trips up everyone at some point. Here is every reliable way to align an image in a wrapper, horizontally and vertically, with a live editor you can poke at and copy-ready snippets for each technique.
Edit the code below and watch the preview update. It centers an image both ways using flexbox, the most reliable modern approach. Try changing justify-content or align-items to flex-start or flex-end.
Horizontal alignment
Pushing an image left, right or center inside its wrapper. Pick the method that fits how the image is displayed.
Center a block image with margin auto
Turn the image into a block, give it a width, and let the left and right margins share the leftover space. This is the classic way to center a standalone image.
img { display: block; margin: 0 auto; }Center an inline image with text-align
If the image is inline, the wrapper controls it. Set text-align: center on the parent and the image lines up in the middle, just like centered text.
.wrapper { text-align: center; }Push an image to the side with float
Floats wrap text around an image and pin it left or right. Handy in article bodies, just remember to clear the float afterwards.
Text flows neatly alongside a floated image, hugging the opposite side of the wrapper while the picture stays pinned in its corner.
img { float: right; margin: 0 0 10px 10px; }Center with flexbox
The modern favourite. Make the wrapper a flex container and set justify-content: center to center horizontally, no widths or block conversions required.
.wrapper { display: flex; justify-content: center; }Vertical alignment
Lining an image up top, middle or bottom needs a wrapper with a known height. These are the dependable ways to do it.
Middle of a line with vertical-align
For an inline image sitting next to text, vertical-align: middle lines its center up with the text. This only affects inline elements, not block layout.
more textimg { vertical-align: middle; }Vertically center with flexbox
Give the wrapper a height, make it a flex container, and set align-items: center. The image floats to the vertical middle no matter its size.
.wrapper { display: flex; align-items: center; height: 150px; }Vertically center with absolute positioning
When flexbox is off the table, position the image absolutely, nudge it down half the wrapper, then pull it back half its own height with a transform.
.wrapper { position: relative; height: 150px; }
img { position: absolute; top: 50%; transform: translateY(-50%); }Center both ways at once
Dead center, horizontally and vertically. Two clean one-liners cover almost every case.
Flexbox, the safe bet
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 170px;
}Grid, the shortest
.wrapper {
display: grid;
place-items: center;
height: 170px;
}Which method should you reach for?
Just horizontal
Standalone image? margin: 0 auto. Inline image? text-align: center on the wrapper.
Just vertical
Next to text, use vertical-align. Inside a sized box, flexbox align-items: center wins.
Both at once
Reach for flexbox or place-items: center with grid. One rule, perfectly centered.
Legacy support
Stuck supporting very old browsers? Absolute positioning with a transform is the dependable fallback.
Frequently asked questions
How do I center an image horizontally?
Make it a block and set margin: 0 auto, or put text-align: center on its wrapper if it is inline. Flexbox with justify-content: center also does the job.
How do I vertically center an image in a div?
The simplest way is flexbox: set the wrapper to display: flex; align-items: center with a defined height. Absolute positioning with top: 50% and transform: translateY(-50%) works too.
How do I center an image both ways?
Use display: flex; justify-content: center; align-items: center, or display: grid; place-items: center. Both center the image on both axes inside the wrapper.
Why does margin auto not center my image?
Usually because the image is still inline. margin: auto only centers block-level elements with a width, so add display: block first.
Further reading: the MDN guide to aligning items in flexbox, the MDN vertical-align reference, and Wikipedia on CSS.
Aligned and ready? Make the image lean and fast before you ship it.
Open the Image Optimizer→