.center

Centers content boxes of arbitrary height, both horizontally and vertically.

.center
Sets up a table display.
.center-cell
Displays as a table-cell with vertical-align: center.
.center-box
Takes care of horizontal centering via margin: auto, and serves as a position parent for content.

div.center
  div.center-cell
    div.center-box
      div

div

.center-box {
  width: 80%;
}

Expands naturally to the height of its content.

div

.center-box {
  width: 80%;
  height: 80%;
}

Also takes a fixed height.

div

.center-box {
  width: 80%;
  height: 80%;
}

Pushes the whole construct bigger when there is too much content.

blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb

div.layer

.center-box {
  width: 80%;
  height: 80%;
}

Which is fixable with class layer. Using .layer requires a height declaration on .center-box.

blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb

tab

div

.tab {
  position: absolute;
  height: 20px;
  top: -20px;
}

Things can easily be positioned outside of the .center-box with a little positioning.

div.center
  div.center-cell
    div.center-box
     iframe

Tests

div render test

div

table-cell>div

table>table-cell>div

div

div

div

div

div

div

div

div

div

iframe render test

This test shows that iframes render with a minimum height when placed inside a table-cell.

iframe on its own

table-cell>iframe

table>table-cell>iframe

Also, they don't respect margin: auto.

wrapped iframe render test

To fix those problems the iframe can be wrapped in a div. It seems to get the message. The advantage is it gives an extra 'hook' to tackle IE with. The disadvantage is that the iframe always has to have width/height 100%, and the width height you want must be set on th wrapper div.

table-cell>div>iframe

table-cell>div>iframe

table>table-cell>div>iframe

Finally, a quirk...

divs do not respect % height declarations inside a table-cell when their content becomes higher than the cell: they push the table bigger. At least they behave the same way in WebKit and FireFox.

It may actually be desired behaviour, but if not there is a fix. The .center-box div has position, so declare it's content as a layer ( { position: absolute; height: 100%; width: 100%; } ). The caveat is that the height of .center-box must now be defined, because it will no longer self-adjust to its absolutely positioned content.

div

blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb

div.layer

blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb