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

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

please, share your markup or provide at least a short valid example in a fiddle. The login form have fixed width/height or not? What browser and version you need to support? — Fabrizio Calderan loves trees, Apr 23 '14 at 10:44
possible duplicate of [How to align text vertically center in div with css?](http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css) — cimmanon, Apr 23 '14 at 11:27
Not every CSS trick has a mixin written for it in Compass. If you don't know what CSS you need to get the job done, how can you possibly ask Sass or Compass to do it? — cimmanon, Apr 23 '14 at 11:29
This is definitely not a duplicate of the provided thread ;) — Yako, Apr 23 '14 at 16:03

score 15 · Accepted Answer · edited Mar 17 '15 at 08:03

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

It seems to be more useful to set `position:relative` otherwise your element is going to jump to either the top or left (depending on whether X or Y axis is selected) of whatever parent element has its own position set to either absolute or relative — Inigo, Nov 24 '14 at 15:05

score 2 · Answer 2 · answered Apr 24 '14 at 06:30

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

score 0 · Answer 3 · answered Aug 08 '15 at 08:41

0

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

Link:

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

answered Aug 08 '15 at 08:41

Dimi Mikadze

416
5
10

This adds nothing over the existing answers (see: http://stackoverflow.com/a/23267046/1652962). – cimmanon Aug 08 '15 at 10:58

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

3 Answers3