How do I vertically align a content div between a header and footer div?

Question

I have three rows of primary divs in my template. I have a header, a content wrapper, and a footer. The header butts right up against the top and the footer against the bottom. I have a content wrapper div in between the two. I basically want to center the content wrapper vertically within the two divs. The content div will always be a dynamic height, so the line-height method won't work for me. What would be the best method for me to use for this?

Answer 1

Vertically centering content

Without using JavaScript, there's a limited number of ways to vertically center dynamic content:

1. HTML tables
2. CSS tables
3. CSS3 flexbox
4. CSS3 grids

In a case like this, the modern approach is to use CSS tables, which is equivalent to HTML tables. But if support for IE7 or earlier is needed, then use HTML tables instead. Flexbox isn't a good fit in this particular case, and it's not supported by IE9 and earlier. CSS grids are only supported by IE10 at present, and the standard hasn't been finalized.

The basic usage of CSS tables is:

HTML

<div class="table">
    <div class="row">
        <div class="cell">Content</div>
    </div>
</div>

CSS

.table {display: table;}
.row   {display: table-row;}
.cell  {display: table-cell;}

Demos   (tested in: IE8/9/10, FF, Chrome, Safari, Opera)

• HTML tables
• CSS tables

Choosing between HTML tables and CSS tables

For tabular data (e.g., a grid of data), favor using HTML tables. It's more semantically correct in this case, and the nature of the source code can be more easily understood, which may help with accessibility and SEO (and the maintainability of the code).

For non-tabular data (e.g., general layout), favor using CSS tables (if floats and CSS positioning are not adequate). It's more semantically correct, since the use of HTML tables creates an expectation of tabular data, and it may be less confusing to screen readers and search engines. Specific uses for layout include vertically-centered content and equal-height columns.

One particular advantage of CSS tables over HTML tables is the support for visibility:collapse, which allows rows or columns to collapse (something not doable with HTML tables). If there's a need for that specific feature for tabular data, use CSS tables.

Answer 2

Save yourself some pain and just break them out into three separate containers.

#header {
    width:1000px; /* or what ever width you need */
    margin-left:auto;
    margin-right:auto;
    clear:both;
    overflow:hidden;
}
#content{
    width:1000px; /* or what ever width you need */
    margin-left:auto;
    margin-right:auto;
    clear:both;
    overflow:hidden;
}
#footer{
    width:1000px; /* or what ever width you need */
    margin-left:auto;
    margin-right:auto;
    clear:both;
    overflow:hidden;
}

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

The overflow hidden attribute will make a div expand automatically to show any additional content that is added to it.. making it behave more like a table cell.

Here is an example enter link description here

Answer 3

You can do this using the following code:-

<div> using display:table-cell; vertical-align:middle