Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Sass mixin for Compass that vertically centres a descendant of the element in which it is included. The mixin neatly wraps-up Sebastian Ekström's updated solution in http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
@import "compass/css3/transform";
@mixin vertically-centre-descendant($descendant-selector, $descendant-position: relative) {
@include transform-style(preserve-3d);
position: relative;
#{$descendant-selector} {
@include transform(translateY(-50%));
position: $descendant-position;
top: 50%;
@content
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment