Vertically align an image inside a div with responsive height

Understanding vertical alignment

Vertical alignment is a notorious CSS challenge. Here are key techniques to make it a walk in the park!

Method 1: Inline-block alignment with pseudo-element

Create a pseudo-element with display: inline-block; and apply vertical-align: middle; for that perfect center:

.container::before {
  content: '';
  display: inline-block;
  /* So middle, it found the middle earth! */
  vertical-align: middle;
}


Method 2: Responsive aspect ratios with padding

Ok, back to math class! Set padding-top or padding-bottom to a percentage value to achieve that desirable ratio:

.container {
  height: 0;
  /* The Golden ratio, a Da Vinci Code secret!
    56.25% is 9/16 ratio */
  padding-bottom: 56.25%;
}


Method 3: Precise centering with positioning and transform

Eat an apple, position: absolute; and transform: translate make precision a cinch:

.image {
  /* Yes, but do you even lift?
    Lifts the image off the document flow! */
  position: absolute;
  top: 50%;
  left: 50%;
  /* What do CSS translate() and taxes have in common?
    Shifts certainly! */
  transform: translate(-50%, -50%);
}


Advanced techniques

Determination is key, but super crafty CSS techniques certainly help.

Technique 1: Display table for the pre-flexbox diehards

Still in a fleeting romance with the past? Try display: table method:

.container {
  /* Responsive as warm bread — Enjoy! */ 
  display: table;
  width: 100%;
}

.container img {
  display: table-cell;
  /* The Gandalf of alignment, It decrees — YOU SHALL NOT DESCEND! */
  vertical-align: middle;
}


Technique 2: Cross-browser compatibility with flexbox and max-height

Ensuring cross-browser alignment with a mix of flexbox and max-height — almost as complex as a secret sauce recipe!

img {
/* Heroic duo to the rescue! */
  max-height: 100%;
  max-width: 100%;
  object-fit: contain; /* Ain't about that squishy stretched life. */
}


Technique 3: Preserving the aspect ratio

Maintaining those aspect ratios while the element scales — just like maintaining those diet ratios while your waistline expands:

.aspect-ratio {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* Just ... trust me on this one. */
}

.aspect-ratio img {
  position: absolute;
  width: 100%;
  height: 100%;
}


Advanced fine-tuning

Incredible designs require attention to detail. Here are a few more gems for your toolbox:

Tip 1: Removing white space in inline elements

Remove white space by setting font-size to zero in the parent container. Yes, CSS often requires a little zen mode:

.container {
  font-size: 0; /* Tiny type, massive impact. */
}
.container img {
  font-size: initial; /* Restoring law and order. */
}


Tip 2: Handling different image sizes

Flex your muscles and get those varying image sizes centered with percentage margins or transform properties:

img.small {
  margin-top: calc(50% - 10em); /* Math, your image's best workout buddy. */
}

img.large {
  transform: translateY(-50%); /* A great upper body lift. */
}


Tip 3: Ensuring images stay within their container

For those times you want your images to respect boundaries. A little max-height and max-width never hurt!

.image-contained {
  max-height: 100%; /* The receding hairline solution for images */
  max-width: 100%; /* Not all containments are bad ... */
}


Ready-made playgrounds & templates

Ever found coding a bit rough sometimes? Playgrounds and templates to the rescue!

• Flexbox playground: JsFiddle Flexbox Example
• Aspect ratio box: CSS-Tricks Aspect Ratio Boxes
• Vertical align samples: JsBin Vertical Alignment

Such play, much fast!