Explain Codes LogoExplain Codes Logo

Align image in center and middle within div

html
responsive-design
css-grid
centering
Anton ShumikhinbyAnton ShumikhinΒ·Jan 29, 2025
⚑TLDR

To center-align an image inside a div, utilize the flexibility of CSS Flexbox:

<div style="display: flex; align-items: center; justify-content: center; height: 200px;"> <img src="image.jpg" alt="" style="max-width: 100%; max-height: 100%;"> <!-- Unlike me, stays perfectly in shape! πŸ˜… --> </div>

Set two stellar properties display: flex, align-items: center for vertical and justify-content: center for horizontal centering. Ensure the image behaves within the div using max-width and max-height.

Multiple methods for impressive centering

We've seen the elegance of flexbox method, so let's be explorers and dig into other efficient ways for the sake of deeper understanding and compatibility.

Absolute positioning to the rescue

Tutelage in absolute positioning with a dash of relative positioned parent:

<div style="position: relative; height: 200px;"> <img src="image.jpg" alt="" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"> <!-- Moving left. Nope, moving right. Ah, just kidding - perfectly centered! 🧭 --> </div>

This code instructs the image to troll physics by pulling back by 50% of its own width and height.

Inline-block for responsive and friendly centering

To court the traditionalists or those stuck with older browsers, inline-block flirts:

<div style="text-align: center; height: 200px; line-height: 200px;"> <img src="image.jpg" alt="" style="vertical-align: middle; max-height: 100%;"> <!-- Can't touch this (height)! 🦾 --> </div>

Here, the parent's line-height matches much with its height, allowing vertical-align to perform the centering waltz with the image.

Embrace the power of CSS grid

CSS Grid isn't left out. Powerful and yet so humble:

<div style="display: grid; place-items: center; height: 200px;"> <img src="image.jpg" alt="" style="max-width: 100%; max-height: 100%;"> <!-- Fits, sits and looks pretty! πŸͺ‘ --> </div>

The mysterious place-items is a catch-all shorthand that takes care of both horizontal and vertical alignment.

Taking into account practical scenarios and considerations

Different scenarios demand different heroes for centering. Your toolbox should never be depleted.

Centering in a mysterious container

When the div dimensions pull a Houdini, flexbox and grid are a dream team that adapt with ease.

Centering that isn’t just for the images

Text, inline elements, basically everything non-replaceable? Cast a text-align: center; for horizontal and sprinkle line-height: for verticalβ€”if you get the height to spill the beans.

A nod to the browser compatibility

To get applause from older browsers like IE6, take to the stage with table-cell display properties:

<div style="display: table-cell; vertical-align: middle; text-align: center; height: 200px;"> <img src="image.jpg" alt="" style="vertical-align: middle;"> <!-- My code keeps me in the middle, extreme sides are too mainstream! πŸ•ΆοΈ --> </div>

Aspect ratio? Check.

Keep the picture perfect ratio with max-width and max-height rather than direct values for organic scaling within the container.

Layout shifts? Not today.

Use width and height attributes or aspect ratio boxes to keep layout shifts at bay while images load.