Vertical centering is impossible in CSS lol!

JS Bin

Great JSBin by Jake Archibald, showcasing 4 ways to vertically center elements in CSS. Technique 2 has my preference:

.technique-2 {
  position: absolute;
  height: auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

The great thing about CSS transforms is that the percentages are referenced to the element’s width/height