CSS vertical align inside a min-height container?

Question

I've been doing a lot of searching and can't find a css solution to vertically align my content.

All of the solutions I see here on SO and the top articles on google require that I have a fixed height container which the content cannot exceed. I cannot guarantee that as the content is dynamically generated.

The only fallback I have that I can make work is some javascript to programmatically measure the inner container and set its margin-top. This is truly icky but the only way that seems to work. :(

See this js fiddle for an example of the markup I want to style.

I am happy to forget IE6 for this, but need to support IE7+ and the latest webkit+firefox...

Is anyone aware of a CSS only solution to this?

Answer 1

As far as I know there is absolutely no way to get this done in IE7 with just CSS, unless you can live with a table. For all decent browsers, and IE8, you can use display:table-cell:

http://jsfiddle.net/hGjfY/

and

• set height to 200px instead of min-height (min-height is not supported on table cells, height is interpreted as min-height)

• add conditional comment to target only IE7, and add min-height:200px; and height:auto; to the inner div (height doesn't work as expected in IE7 on table cells)

• load jQuery fix only for IE7, or live with a non-centered view in IE7

Answer 2

Here is a CSS-only approach using the HTML your provided on jsfiddle. It does require two wrapper DIVS around your content, but you already had that in your HTML. This solution does not use tables or table cells, but DIVS that act like tables and table cells using CSS.

Here is your jsfiddle modified and working: http://jsfiddle.net/8Mjc3/2/

HTML

<div class="vertical-center-container">
  <div class="vertical-center-table-cell">
    <!-- INSERT CONTENT TO BE VERTICALLY ALIGNED -->
  </div>
</div>

CSS

.vertical-center-container {
    display: table;
    width:100%;
}
.vertical-center-table-cell {
    display: table-cell;
    vertical-align: middle;
}

This is a modified solution using what I learned about vertical alignment using the Table Cell Method from a Smashing Magazine article.

Answer 3

The @ptriek answer is good but if you also want to get the center horizontal alignment than you need to have an extra wrapper and set it as

.outer{ 
    display: table; 
    width: 100%
}
.inner{
    diplay: table-cell;
    vertical-align: middle;
    height: 200px;
    text-align:center;
}