ansaurus

Question

How can I center content between a header and footer div?

Answer 1

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 2008-10-15 22:44:44

If you add margin-top:-25%; margin-left:-25%; that should re-centre the element.

Ian Oxley 2008-10-16 13:58:35

% in margin refers to size of container, not the element. You need to use absolute size there.

porneL 2008-10-16 18:27:44

Answer 2

+1 A:

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

abahgat 2008-10-15 22:50:56

Answer 3

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 2008-10-16 01:52:55

Answer 4

+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 2008-10-16 18:34:24

ansaurus

tags:

views:

answers:

How can I center content between a header and footer div?

related questions