Absolutely Centered Layout
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
- Absolute Horizontal and Vertical Centering via CSS
- Obscure XHTML Tags
- Stylish Deleted Text
- Accessibility Notes Plus
- HTML Frames Notes Plus
- XHTML Document Header Resource
- IE Scrollbar Colors
About this article
This is article #203, posted by Perishable on Monday, September 18, 2006 @ 08:14am. Categorized as Presentation, Structure, and tagged with css, html, layout, markup, xhtml. Updated on May 05, 2008. Visited 25699 times. 19 Responses »
Bookmark • Trackback • Comment • Subscribe • Explore
« IE Scrollbar Colors • Up • Customize WordPress Quicktags »
1 • December 7, 2006 at 5:30 am — Sulman Bhatti says:
Your solution “With Tables” worked perfectly well. Thank you so much for saving me hours of tiresome searching and endless trial and error.