The BarbLog

Design, front-end dev and other random thoughts

Vertically center anything with CSS3 transforms

July 31, 2014 | Comment

I had a variable height container, with variable amounts of text in it, but needed to vertically center part of the content regardless of the length of the rest of the content. Absolute positioning and display:table-cell weren’t viable options and I’d started to look for JavaScript solutions when I came across a super simple CSS-only method on zerosixthree.

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);

This didn’t work out of the box though, not sure why but I had to change the translate values from -50% to +61% which then resulted in a nice vertically centered div floated to the right of my container.

My application doesn’t rely on this working in all browsers – if the container isn’t aligned properly in IE8 and below the site is still usable just not as pretty, but I think we are at a stage in web design where we have to accept these things, life’s too short to make everything pixel perfect in every browser as long as it doesn’t hinder the user experience!

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>