Vertical align anything with just 3 lines of CSS
// Source: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ | |
/* Mixin */ | |
@mixin vertical-align { | |
position: relative; | |
top: 50%; | |
-webkit-transform: translateY(-50%); | |
-ms-transform: translateY(-50%); | |
transform: translateY(-50%); | |
} | |
.element p { | |
@include vertical-align; | |
} | |
/* Placeholder selector */ | |
%vertical-align { | |
position: relative; | |
top: 50%; | |
-webkit-transform: translateY(-50%); | |
-ms-transform: translateY(-50%); | |
transform: translateY(-50%); | |
} | |
.element p { | |
@extend %vertical-align; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment