How to vertically center a div with sass (compass)?

StackOverflow https://stackoverflow.com/questions/23240114

Question

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...

Was it helpful?

Solution

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

OTHER TIPS

I finally found a solution.

A specific class should be added to the htmltag.

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);
    }
}

vertical-align {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Link:

https://github.com/DimitriMikadze/sass-useful-mixins

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top