Vertically center align a div within anothe div

Question

say i have

<div id ="outer" class="outer">
    <div id= "inner" class="inner">
      //some stuff
    </div>
</div>

the inner div has a dynamic height, it changes depending on what is inside the div. the outer div is just a container which is set to have the height of the window.

I want to set it so that the inner div is vertically centered within the outer div. Is there a way to do this easily in CSS or is JavaScript necessary?

THE SOLUTION I FOUND:

var container= document.getElementById("outer");
var inner= document.getElementById("inner");
var inHeight=inner.offsetHeight;

container.style.height=(window.innerHeight-10);
container.style.width=window.innerWidth;

var conHeight=container.offsetHeight;

inner.style.marginTop=((conHeight-inHeight)/2);

In case anyone else searching for a solution to the same problem, this worked for me.

emphasized text

Related question with some useful suggestions: http://stackoverflow.com/questions/7206640/css-vertically-align-div-when-no-fixed-size-of-the-div-is-known — Artyom, Feb 16 '12 at 08:26

score 3 · Accepted Answer · answered Feb 16 '12 at 09:05

3

try this out http://jsfiddle.net/gLChk/12/

but it won't be supported in IE<8 browsers. To make it work on all the browsers, you'll have to write a js which will find the height of .inner and apply these css properties

$(document).ready(function(){
var inner = $('.inner'),
    ht = inner.height();

inner.css({'position':'absolute','top':'50%','margin':-ht/2+'px 0 0 0'});
});

Hope this helps. :)

answered Feb 16 '12 at 09:05

Abhidev

7,063
6
21
26

i think i did pretty much the same thing only using JS instead of JQuery. see my question. I added the solution I came up with. – moesef Feb 16 '12 at 09:19
Oh...well I didn't see your updated answer...well that'll work too. :) – Abhidev Feb 16 '12 at 09:43
literally doing the same thing but just in different ways. – moesef Feb 16 '12 at 18:18

score 0 · Answer 2 · answered Feb 16 '12 at 08:16

0

.outer {
    display: table;
    position: relative;
    width:100%;
    height:200px;
    border:1px red solid;
}
.inner {
    display: table-cell;
    position: relative;
    vertical-align: middle;
}

answered Feb 16 '12 at 08:16

Desigens

63
4

CyrillC · Answer 3 · 2012-02-16T08:17:23.827

-1

Try it with

.inner {
top: 50%;
bottom: 50%;    
}

jsfiddle

greets

edited Feb 16 '12 at 08:17

answered Feb 16 '12 at 08:12

CyrillC

557
1
3
15

3

With this method wouldn't you need to subtract the height of the inner div / 2 from 50% to get the 'exact' vetical centering? – dougajmcdonald Feb 16 '12 at 08:16
if you check it properly, its not exactly vertically in middle. – Abhidev Feb 16 '12 at 08:57

score -3 · Answer 4 · answered Feb 16 '12 at 08:06

-3

use:

.inner
{
    margin-top:auto;
    margin-bottom:auto;
}

answered Feb 16 '12 at 08:06

Hadas

10,188
1
22
31

i actually think this will work... but it turns out that my outer div is not set to the height and width of the window.... – moesef Feb 16 '12 at 08:13

Vertically center align a div within anothe div

4 Answers4

Linked