Vertical align anything with just 3 lines of CSS
source http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
.element { position: relative; top: 50%; transform: translateY(-50%); } |
It is a similar technique to the absolute-position method, but with the upside that we don’t have to set any height on the element or position-property on the parent. It works straight out of the box, even in IE9.
To make it even more simple, we can write it as a mixin with its vendor prefixes:
@mixin vertical-align { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .element p { @include vertical-align; } |