<p>In a previous question, I learned how to keep a footer div at the bottom of the page. (<a href="https://stackoverflow.com/questions/206652/how-to-create-div-to-fill-all-space-between-header-and-footer-div">see other question</a>)</p>

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

<p>so what I've got is:</p>

<pre><code>#divHeader
{
    height: 50px;
}

#divContent
{
    position:absolute;
}

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

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

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.