Skip to content

Instantly share code, notes, and snippets.

@danbettles
Created May 21, 2016 12:52
Show Gist options
  • Save danbettles/5a035f7027cf0f84136cce4417878b72 to your computer and use it in GitHub Desktop.
Save danbettles/5a035f7027cf0f84136cce4417878b72 to your computer and use it in GitHub Desktop.
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