Vertically center a div with variable height within a div that is 100% of the viewport

Question

I know it looks like a question that has been asked many times, but I just couldn\'t find the solution to that very specific situation.

Here\'s the basic wireframe o

Answer 1

Set a grandparent element to be display:table; height:100% and the parent element to be display:table-cell; vertical-align:middle.

See "Method 1" here for an example.

_{Also, note that your markup should not use class="centered"; use a semantic class name instead.}