Vertically center div with dynamic height and 100% width

Question

Possible Duplicate:
How can I vertically center text in a dynamically high div?

How to vertically center div with dynamic height and 100% width in browser window?

<div class="login-signup-page">
<div class="login-signup"></div>
</div>

where login-signup has 100% width and dynamic height

**Dublicate**: http://stackoverflow.com/questions/10939288/how-can-i-vertically-center-text-in-a-dynamically-high-div/10939940 — doptrois, Jun 12 '12 at 19:51

score 1 · Answer 1 · answered Jun 12 '12 at 19:15

1

Short answer: You can't.

Long answer: If you know the height, you can use fixed positioning, a top:50% and a margin-top equal to negative half the height. Short of that, you can use some basic JS to calculate what the margin-top should be based on the offsetHeight. If you are vertically centering in another element, rather than the window, you can do the same but with an absolute position provided the container is not static-positioned.

answered Jun 12 '12 at 19:15

Niet the Dark Absol

320,036
81
464
592

1

This user speaks the truth. Further, from personal experience, a set top margin of 50px to 150px usually looks far better than a vertically centered box. The reason being that, usually, the eye will scan from the top of the page down, so a large margin at the top will affect the user far more than a large margin at the bottom. – Ryan Kinal Jun 12 '12 at 19:22
@RyanKinal - Very true. If you want to do it, it's possible, but in my opinion, not a very smart design choice. – Anthony Atkinson Jun 12 '12 at 19:27

Anthony Atkinson · Accepted Answer · 2012-06-12T19:28:48.177

0

Kolink is indeed correct, but it doesn't take much work. All it takes is some clever CSS and JavaScript (I used jQuery in my example below) to make it work.

<div class="login-signup-page">
<div class="login-signup">Sample Text</div>
</div>

.login-signup-page {
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:100%;
    background:grey;
}

.login-signup {
    width:100%;
    background:white;
    position:absolute;
    top:50%;
}


$(document).ready(function() {
   $('.login-signup').css('margin-top', -$('.login-signup').outerHeight() + 'px'); 
});

Demo

edited Jun 12 '12 at 19:28

answered Jun 12 '12 at 19:22

Anthony Atkinson

3,101
3
20
22

Also, please be aware that if the content is longer than the window you might lose some of your content to to overflow. – Anthony Atkinson Jun 12 '12 at 19:24
1

You may want to consider `outerHeight()` instead of `height()`, to take into account padding and border. – Ryan Kinal Jun 12 '12 at 19:24
May I ask what the reasoning is for multiplying the height by `-1` when you could just slap a `-` in front of it? – Niet the Dark Absol Jun 12 '12 at 19:24
@Kolink, just a difference in the way we write and read ;) Both work, don't they? – Anthony Atkinson Jun 12 '12 at 19:25
I guess I just have an aversion to seeing two such operators side by side. Nothing wrong with `*-1`, of course, just personal preference. And two fewer bytes :p – Niet the Dark Absol Jun 12 '12 at 19:29
@RyanKinal - Changed my code to reflect your wise advice... – Anthony Atkinson Jun 12 '12 at 19:29
@Kolink - Made an edit, and it's all for you. – Anthony Atkinson Jun 12 '12 at 19:30
Since it's of variable height, you may want to select a minimum top margin, so your content doesn't fall off the top of the window. – Ryan Kinal Jun 12 '12 at 19:40

0b10011 · Answer 3 · 2012-06-19T20:51:08.780

See the jsFiddle example or go straight to the code below:

HTML

<div class="login-signup-page">
<div class="login-signup"></div>
</div>

CSS

.login-signup-page {

 /* Position at top of page */
 position:fixed;
 top:0;

 /* Position halfway down page (in supporting browsers) */
 -moz-transform:translate(0, 50%);
 -webkit-transform:translate(0, 50%);
 -ms-transform:translate(0, 50%);
 -o-transform:translate(0, 50%);
 transform:translate(0, 50%);

 /* Prevent hidden content */
 height:100%;
 width:100%;

}

.login-signup {

 /* Prevent hidden content */
 max-height:100%;
 max-width:100%;
 overflow:auto;

 /* Position in center of page (in supporting browsers) */
 -moz-transform:translate(0, -50%);
 -webkit-transform:translate(0, -50%);
 -ms-transform:translate(0, -50%);
 -o-transform:translate(0, -50%);
 transform:translate(0, -50%);

}

Note: In browsers that don't support translate(), the content will appear at the top of the page (instead of being cut off, had top:50%; been used instead).

score -2 · Answer 4 · answered Jun 12 '12 at 19:24

You'll need Javascript or jQuery to get the height of the element and the browser window, then calculate based on those numbers. Something like this:

$(document).ready(function() {
    var signupHeight = $('.login-signup').height(); // height of your dynamic element
    var winHeight = $(window).height(); // height of the browser window
    $('.login-signup').css('margin-top',(winHeight - signupHeight) / 2); // subtract one height from the other, then divide by 2 so the top and bottom margins are equal
});

Vertically center div with dynamic height and 100% width

4 Answers4

HTML

CSS