views:

1061

answers:

4

In a previous question, I learned how to keep a footer div at the bottom of the page. (see other question)

Now I'm trying to vertically center content between the header and footer divs.

so what I've got is:

#divHeader
{
    height: 50px;
}

#divContent
{
    position:absolute;
}

#divFooter
{
    height: 50px;
    position:absolute;
    bottom:0;
    width:100%;
}
<div id="divHeader">
    Header
</div>
<div id="divContent">
    Content
</div>
<div id="divFooter">
    Footer
</div>

I've tried creating a parent div to house the existing 3 divs and giving that div a vertical-align:middle; but that gets me nowhere.

A: 

You need to either set the height of the div to fill the whole content area or its coordinates have to be in the center. Something like top:50%; left:50% but of course that will make the div a bit off to the bottom-right.

Mark Cidade
If you add margin-top:-25%; margin-left:-25%; that should re-centre the element.
Ian Oxley
% in margin refers to size of container, not the element. You need to use absolute size there.
porneL
+1  A: 

In alternative, as far as I remember, you can using hacks like this (more info here).

abahgat
A: 

Maybe try:

#divHeader
{
    height: 50px;
}

#divContent
{
    /*position:absolute;*/
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

#divFooter
{
    height: 50px;
    position:absolute;
    bottom:0;
    width:100%;
}
CoolGravatar
+1  A: 

In a perfect world where CSS2 matters:

html,body {height:100%;}
body {display:table;}
div {display:table-row;}
#content {vertical-align:middle;}

&

<body>
<div>header</div>
<div id="content">content</div>
<div>footer</div>
</body>

In IE-filled world you have to use trick with absolute positioning that marxidad mentioned.

porneL