How to Vertically Align an Image Within a Div With Responsive Height

Solutions with CSS

First of all, we create an inline-block element as the first (or last) child of the parent element and set its height to 100% so that it will take all the height of the parent element. We use the vertical-align property with its "middle" value both on the first child and the image. Thus, the image will stay in the middle of the line space.

To make the height of the container change with its width, you need to use the padding property with a percentage value for the top (or bottom) on the "example" child element or the :before (or :after) pseudo-element. In this case, the percentage value of padding is relative to the width of the "responsive-container" class.

Then, we wrap the image by a wrapper element ("img-container") and remove that element from the document normal flow with the position property set to "absolute". After that, we use the top, right, bottom and left properties to expand the wrapper so as it will fill the whole space of its parent. This will fix the problem of extra space caused by the use of the padding-top property.

Example of aligning an image within a <div> with responsive height:

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass) 

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .responsive-container {
        position: relative;
        width: 100%;
        border: 1px solid #666;
      }      
      .example {
        padding-top: 100%;
        /* forces 1:1 aspect ratio */
      }      
      .img-container {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
      }      
      .img-container:before {
        content: " ";
        display: inline-block;
        vertical-align: middle;
        height: 100%;
      }      
      .img-container img {
        vertical-align: middle;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div class="responsive-container">
      <div class="example"></div>
      <div class="img-container">
        <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" />
      </div>
    </div>
  </body>
</html>

For browser compatibility, we remove the :before pseudo-element in the next example, and use an element as the first child of the "img-container".

Example of aligning an image within a <div> without the :before pseudo-element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .responsive-container {
        position: relative;
        width: 100%;
        border: 1px solid #666;
      }      
      .example {
        padding-top: 100%;
      }      
      .img-container {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
      }      
      .img-container .centerer {
        display: inline-block;
        vertical-align: middle;
        height: 100%;
      }      
      .img-container img {
        vertical-align: middle;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div class="responsive-container">
      <div class="example"></div>
      <div class="img-container">
        <div class="centerer"></div>
        <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" />
      </div>
    </div>
  </body>
</html>

So, this technique offers some advantages:

  • The container can have dynamic dimensions.
  • You don’t need to specify the dimensions of the image.

You can use the max-height and max-width properties on the image if you want to keep your image within the box in lower width.

Example of aligning an image within a <div> with the max-height and max-width properties:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .responsive-container {
        position: relative;
        width: 100%;
        border: 1px solid #666;
      }      
      .example {
        padding-top: 100%;
      }      
      .img-container {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
      }      
      .img-container .centerer {
        display: inline-block;
        vertical-align: middle;
        height: 100%;
      }      
      .img-container img {
        vertical-align: middle;
        display: inline-block;
        max-height: 100%;
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="responsive-container">
      <div class="example"></div>
      <div class="img-container">
        <div class="centerer"></div>
        <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" />
      </div>
    </div>
    </div>
  </body>
</html>