Center Pages in Browser Window

If you are going to use a fixed width template - one that does NOT resize when the browser window changes size - then you may want to have the page centered in the browser window. This is especially true if the viewer is using their browser full screen. You can achieve the same results using a liquid layout by specifying the width of the container using a percentage for the width. NOTE: If you are using an absolute positioned <div> tag, this solution will NOT work.

Screenshot of page not centered in browser window. versus Screenshot of page centered in browser window.

Center a <div>

The <div> tag defines a division or a section in an HTML document. You can center a <div> on a page by using the code shown below. Copy and paste it into your external style sheet

CSS

#outerWrapper { margin: 10px auto 10px auto;
width: 740px;
border: 1px solid #441B10;
padding: 10px;
background-color: #f8faef; }

or between the <head> tags of your page.

XHTML

Your XHTML code would look like this

<body>
<div id="outerWrapper">
<h1>Heading Tag Content</h1>
<p>Some content here.</p>
<p>More content here.</p>
<p>More content here.</p>
</div>
</body>

Peaks of Otter template uses above code.

Center a <table>

Screenshot of a table centered on a page.

The photo gallery template uses a table centered on the page as the container for the images and descriptions. You can achieve this result by using the following style rules for your table.

CSS

#gallery {
border-collapse: separate;
margin: 10px auto 30px auto;
border: 2px ridge #CCCCCC;
width: 99%; }

XHTML

<body>
<table id="gallery>
<tr>
<td>Content</td>
</tr>
<table>
</body>