Book Sale! Save 20% on WordPress books with discount code: SAVE20
Web Dev + WordPress + Security

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 = Fullstack Developer. Book Author. Teacher. Human Being.
Banhammer: Protect your WordPress site against threats.

23 responses to “Absolutely Centered Layout”

  1. Sulman Bhatti 2006/12/07 5:30 am

    Your solution “With Tables” worked perfectly well. Thank you so much for saving me hours of tiresome searching and endless trial and error.

  2. Jeff Starr
    Perishable 2006/12/09 7:10 pm

    Happy to help — I am glad it worked well for you!

  3. The thing with tables will never work in Firefox if you have proper DOCTYPE set.

    However, I what to do about it (check my website).

  4. Jeff Starr
    Perishable 2007/03/25 3:49 pm

    quake,

    Thanks for the tip! I snooped around your site (including source code) for awhile and did not find anything concerning absolute centering via tables. So, we went ahead and provided our own solution. Please refer to the above article for a standards-compliant method of centering content absolutely via a table-based layout. Cheers.

  5. thanks my friend,
    you saved me with your centering with CSS

  6. Jeff Starr
    Perishable 2007/09/08 1:04 pm

    Glad to be of service!

  7. hi .. the div solution works well, only one problem maybe somebody can help:

    if you make the browser window smaller then the div is -> the scrollbar doenst fit right und you cant scroll over the whole area …

    example here:

    http://www.berghindjoseph.com/testweb/home.html

    maybe some body knows a solution for this?

    thank you and greetings, max

  8. Jeff Starr
    Perishable 2007/09/18 9:20 am

    Thank you for pointing this out, Max. I will look over the differences between the two solutions, post on the results, and possibly update this post as well. Also, I coded the /testweb/ link in your first comment because its target seems to have been removed. Let me know if this is not the case and I will restore the link. Otherwise, thanks for sharing your findings with us!

  9. sorry i’m in a hurry …

    the link:

    http://www.berghindjoseph.com/testweb/home3.html

    cheerz, max *

  10. Jeff Starr
    Perishable 2007/09/18 9:29 pm

    No sweat — Thank you kindly!

  11. [IGU]Goddess 2007/11/12 12:15 pm

    Thank you ever so much for this solution!! It works like a charm for me, just what i needed!

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
BBQ Pro: The fastest firewall to protect your WordPress.
Thoughts
On macOS when an app won’t hide, you can force it by holding the ⌥ (option) key and clicking anywhere on the desktop.
Currently having a blast redesigning Plugin Planet, so much work so little time.
Thanks to David McCan over at WebTNG for the awesome BBQ Pro review.
Enjoyed a nice mini-vacation with my fam. Great way to recharge and regroup.
Nice little interview with yours truly over at ThemeIsle. WordPress, web dev & more!
Perishable Press celebrating 16 years online! An incredible, rewarding journey.
Thanks to Nicholas Ferrell for his excellent and thorough review of Wutsearch search-engine launchpad.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.