Skip to content

Instantly share code, notes, and snippets.

@federicosan
Forked from danbettles/_mixins.scss
Created June 12, 2016 04:42
Show Gist options
  • Save federicosan/2630686ba8f9a5719f9bf954b51d3b64 to your computer and use it in GitHub Desktop.
Save federicosan/2630686ba8f9a5719f9bf954b51d3b64 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