Cross-browser Vertical & Horizontal Centering

Vertical & horizontal centering of a content box with a fixed width & flexible height achieved with 3 nested DIVs and a bit of CSS. These are the important parts:

  1. outter DIV: display: table; position: absolute; height: 100%; width: 100%
  2. middle DIV: display: table-cell; vertical-align: middle
  3. inner DIV: margin-left: auto; margin-right: auto; width: [whatever width you want]

To accommodate for IE 7 & older, use a separate style sheet with these changes:

  1. link to the style sheet: <!--[if lte IE 7]><link rel="stylesheet... /><![endif]-->
  2. outter DIV: display: inline-block; top: 0
  3. middle DIV: display: inline-block; top: 50%, position: relative
  4. inner DIV: display: inline-block; top: -50%, position: relative

Test the flexibility of this layout by adjusting the content: