How to vertically center a div with sass (compass)?
Solution 1
I use this mixin to centre content. It uses tranforms so not all versions of IE are supported.
MIXIN:
@mixin centre($axis: "both"){
position:absolute;
@if $axis == "y"{
top:50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
@if $axis == "x"{
left:50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
@if $axis == "both"{
top:50%;
left:50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
USAGE:
Y axis : @include centre(y);
X axis : @include centre(x);
Both axis : @include centre;
WORKING EXAMPLE: Fiddle
Solution 2
I finally found a solution.
A specific class should be added to the html
tag.
html.verticalCenter { // Center vertically body's block-children
height: 100%;
& body {
height:100%;
display:-ms-flexbox;
display:-moz-box;
display:-webkit-box;
display:-webkit-flex;
display:flex;
-ms-align-items:center;
-moz-align-items:center;
-webkit-align-items:center;
align-items:center;
}
}
Or, if you've got compass :
html.verticalCenter { // Center vertically body's block-children
height: 100%;
& body {
height:100%;
@include display-box;
@include box-align(center);
}
}
Yako
I'm mainly a UX Designer, user researcher, interface designer. But I also build up some stuff for web and mobile with HTML5, jQuery, PHP, and some pinches of a few frameworks.
Updated on June 04, 2022Comments
-
Yako almost 2 years
Well, everything is in the question... I'm working on a login form that I would like to align vertically at the center of the body. I'm new to sass and compass, and I struggle to use the right mixin for this...
The html code is pretty simple:
<body> <div> A div of unknown height to be vertically centered. </div> </body>
This is the CSS3 code that would make it work:
<style> html{ height:100%; } body{ height:100%; display:flex; align-items:center; /* I spared all the compatibility properties for the different browsers */ } </style>
___EDIT :
I came up to something like this, but I realized I misunderstood the way to use the parent selector with SASS:
div.ieVerticalCentered { body.verticalCentering & { height:100%; display:-ms-flexbox; display:-moz-box; display:-webkit-box; display:-webkit-flex; display:flex; -ms-align-items:center; -moz-align-items:center; -webkit-align-items:center; align-items:center; html.verticalCentering & { height:100%; } } }
Therefore, the core question is: is it possible to apply a specific style to a parent element when a child element has a specific class.
In my knowledge, it's not possible with static CSS, but could be done with JS. Having just discovered Sass, I was wondering if something nice could be considered...