Latest TweetsVerify any search engine or visitor via CLI Forward-Reverse Lookup perishablepress.com/cli-forwar…
Perishable Press

Absolutely Centered Layout

This tutorial explains several techniques for centering content absolutely using (X)HTML. By “absolutely”, I am referring to an element (such as a <div>) that is centered on the page both horizontally and vertically. The techniques presented below explain how to center elements using CSS, frames, or tables.

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>

Jeff Starr
About the Author Jeff Starr = Creative thinker. Passionate about free and open Web.
Archives
23 responses
  1. Jeff Starr

    You are very welcome! ;)

  2. Joel Nylund November 15, 2007 @ 1:59 pm

    Hi, im not clear if this works in the situation where you have a page that scrolls vertically, will it center the div on the visible portion of the page?

  3. Jeff Starr

    Joel,

    If I remember correctly, this method will center content according to the width and height of the web page as displayed in compliant browsers. So, if your page is 50 screens high, the content will be centered according to the entire height (i.e., 50 screens). If you think about this for a moment, it makes sense because it would be impossible to center 50 screens of content within the visible portion of the browser.

  4. Ryan Monaghan February 14, 2008 @ 2:12 am

    I could kiss you. I’ve been tirelessly searching through dreamweaver and css manuals trying to figure out how to do this. I knew it could be done, though many said it couldn’t. Thank you again, SO SO MUCH!

  5. Jeff Starr

    You are most welcome, Ryan — happy to help! ;)

  6. Thanks a bunch, working on a couple sites right now, and i couldn’t get them to center for the life of me. QUITE THE LIFESAVER!

  7. Jeff Starr

    My pleasure, BluDiE — thanks for the feedback! ;)

  8. SneakyWho_am_i September 28, 2008 @ 4:05 am

    One day I will learn a way to do this to elements which
    – have unknown widths and heights
    – are arbitrary and at any depth
    – do not have to share the page with any layout tables

    and I will learn to do it
    – without javascript
    – blindfolded

    I guess for now I can settle for either centering them horizontally and then vertically positioning them with javascript (so it degrades gracefully) or making a best guess without javascript and then using javascript to tweak it.

    As soon as best guesses, javascript, and overflow get involved, it starts to get weird in mobile devices though, in my experience.

  9. Thanks for the ‘table’ solution for the vertical centering!!!
    L.

  10. Thanks so much, I’ve been looking for this for so long!

  11. C0ol! Thanks for the Informations!

[ Comments are closed for this post ]