Align image in center and middle within div

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.