Center image in div horizontally

html

responsive-design

css

centering

byNikita Barsukov·Dec 4, 2024

The fastest way to center a horizontal image in a div is to apply the CSS property text-align: center; to the div. This method works for images treated as inline elements:

<div style="text-align: center;">
  <img src="image.jpg" alt="">
</div>

For block-level images, or if you want a solution that offers wider browser compatibility, apply the properties margin-left: auto; and margin-right: auto; to the image itself:

<img src="image.jpg" alt="" style="display: block; margin-left: auto; margin-right: auto;">

Now let's explore how to approach different scenarios to ensure your images stay centered!

Centering scenarios & solutions

Here we dive into how to handle different scenarios when centering an image within a div and explain the tailored solutions.

Unknown image dimensions

In case you get images with different dimensions, don't panic. Set display: flex; on the parent div to easily get the job done:

<!--
    When the image says: "I want to be free, I won't tell you my size!" 
    And you're like: "Alright, but you stay centered!" 
-->
<div style="display: flex; justify-content: center;">
  <img src="mystery-size-image.jpg" alt="">
</div>

Responsive considerations

Flexibility is key. Here's a solution for responsive designs where max-width and max-height are set to ensure the image scales effectively within its parent container:

<!--
    When the image tries to escape the boundary of its container.
    And you say: "Stay inside, it's a jungle out there!"
-->
<div style="display: block; width: 100%; height: auto;text-align: center;">
  <img src="responsive-image.jpg" alt="" style="max-width: 100%; max-height: 100%;">
</div>

Absolute positioning

Absolute positioning allows you to freely move your image like a chess piece across the board. It’s particularly good for overlay effects:

<!--
    When the image thinks it's an absolute monarch.
    But the div reminds it: "This land is my territory. You move as I say!"
-->
<div style="position: relative; min-width: 100px;">
  <img src="overlay-image.jpg" alt="" style="position: absolute; left: 50%; transform: translateX(-50%);">
</div>

Expert level centering tricks

Sometimes, applying basic CSS isn't enough. Let’s explore some advanced tricks

Mastering "display: table-cell;"

In cases when Flexbox isn't the best fit, the older display: table-cell; solution paired with vertical-align: middle; achieves both, horizontal and vertical centering:

<!--
    When the image wants to be the star of the show
    And the div's like: "Okay fine, you get the center stage!"
-->
<div style="display: table-cell; text-align: center; vertical-align: middle;">
  <img src="center-stage-image.jpg" alt="">
</div>

The good, bad, and ugly of absolute positioning

Absolute positioning might get tricky, especially when the element ends up a pixel too far on one side. This is where negative margins come in:

<!--
    When you tell the image to meet you in the middle,
    But it ends up getting lost and you need to fetch it back.
-->
<div style="position: relative;">
  <img src="lost-center-image.jpg" alt="" style="position: absolute; left: 50%; top: 50%; margin-left: -[half-your-image-width]px; margin-top: -[half-your-image-height]px;">
</div>

Make sure to replace [half-your-image-width] and [half-your-image-height] with your image's actual dimensions.

Check browser compatibility

Before setting this live, check the implementation across different browsers to ensure the consistency of your centering.

The "Wrap" Up

Wrapping an image in an inner div gives you extra control, allowing capabilities like additional padding or managing complex overlays.

<div class="outer-wrapper" style="display: flex; justify-content: center;">
  <div class="inner-wrapper" style="padding: 20px; width: 80%; text-align: center;">
    <img src="comfortably-wrapped-image.jpg" alt="">
  </div>
</div>