Absolute Centering with CSS & (X)HTML

Designing an absolutely centered layout involves centering a division both horizontally and vertically. When this is done, the centered division (or other element) is centered according to the browser window. To accomplish this, use this (X)HTML:

<div id="wrapper">
 <div id="center">
 </div>
</div>

And employ this CSS (commented with explanations):

body {
	background-color: #333; /* cosmetic */
	margin: 0px; /* required */
}
div#wrapper {
	background-color: red; /* cosmetic */
	height: 0px; /* set to taste */

	/* required */
	position: absolute;
	overflow: visible;
	display: block;
	width: 100%;
	left: 0px;
	top: 50%;
}
div#center {
	background-color: #666; /* cosmetic */
	border: 3px solid #FFF; /* cosmetic */

	overflow: auto; /* set to taste */

	position: absolute; /* required */
	left: 50%; /* required */

	margin-left: -200px; /* half of width */
	width: 400px; /* width of div */

	height: 300px; /* height of div */
	top: -150px; /* half of height */
}

Taken together and used properly, these two blocks of code will produce an (X)HTML layout with an absolute center that is centered both vertically and horizontally.

Update: Thanks to a comment left by Max, we now explain an alternate method of horizontally and vertically centering layouts via CSS. The alternate method utilizes floated divs to solve the disappearing scrollbar issue.

Absolute Centering with Frames

This method centers content via frames:

<frameset cols="*,777,*">
 <frame src="http://example.tld/empty.html">

 <frameset rows="*,333,*>
  <frame src="http://example.tld/empty.html">
  <frame src="http://example.tld/centered-content.html">
  <frame src="http://example.tld/empty.html">
 </frameset>

 <frame src="http://example.tld/empty.html">
</frameset>

Absolute Centering with Tables

To center content within any (X)HTML document, try this:

<table width="100%" height="100%" align="center" cellspacing="0" cellpadding="0" border="0">
 <tr>
  <td align="center" valign="middle">

   <!-- content goes here -->

  </td>
 </tr>
</table>

New & Improved Absolute Centering with Tables

Absolute centering in Firefox and other standards-compliant browsers is not as difficult as it may seem. This next method is 100% valid (X)HTML/CSS and works with any !DOCTYPE (i.e., loose, transitional, or strict) on virtually any modern browser:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><title>Absolutely Centered Table Layout</title>
<style type="text/css">
html, body { 
	height: 100%;
	padding: 0;
	margin: 0;
}
table { 
	text-align: center;
	height: 100%;
	width: 100%; 
	border: 0;
}
</style>
</head>
<body>
 <table>
  <tr>
   <td><!-- [ content goes here ] --></td>
  </tr>
 </table>
</body>
</html>

Absolutely Centered Page via Tables

This method may not appeal to the (X)HTML purist, but if you need a cross-browser method of centering an entire page, this code will most certainly do the trick. The idea here is to wrap the entire web document within an absolutely centered table. Thus, the first three lines must be placed before all page content, while the last three lines must be placed after all page content.

<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
 <tr>
  <td align="center" valign="middle">

   <!-- Place the entire web document here for absolute centering -->

  </td>
 </tr>
</table>

Related articles