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

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.