Centering content on a web page

This is a very simple technique but if you take advantage of it, you could create very attractive web pages with it.

What you need to do is to create a table to wrap the content of your webpage in and set both the width and height properties of the table to "100%". For the horizontal alignment property of the cell, make it "center". You should also set the vertical property to "middle". By default, the browser will set this value to "middle" but it wouldn't hurt to explicitly set it yourself. If anything at all it would only make the code clearer and easier to understand.

Here's the sample code:

<table border="0" width="100%" height="100%">
<tr>
<td align="center" valign="middle">
Your content goes here.
</td>
</tr>
</table>

With this code in place, when you resize the browser, the table size will be updated and the content will be re-render to center it within the page.