Full-page horizontal and vertical centering demo page

This is a demo document for the technique described in the article Flexible height vertical centering with CSS beyond IE7. Please refer to the article for details and context.

This box is centered on the screen, both horizontally and vertically. You need to specify a width for it, but height is optional.

The technique used here has been verified to work in IE8+, Safari, Opera, Firefox, and Chrome. The vertical centering does not work in IE7 and older, but the horizontal centering does.

The following CSS is used for the centering effect:

html,
body {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}
html {display:table;}
body {
	display:table-cell;
	vertical-align:middle;
}
#body {
	max-width:50em;
	margin:0 auto;
}

View source for the HTML.