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

Source Code: (back to article)

<!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>