Often I find that I may want to center some object right smack-bang in the middle of the user’s page. For example if I’m making a splash page or something. If you’re trying to design your site with tables then it is going to be a nightmare, but it works a breeze using div tags and css.

Rather than hoping vainly to guess the user’s browser window size, the following CSS will place a block right where you want it, no matter what resolution it’s viewed at (well, almost).

In this example I want to center a 600 x 400 rectangle. Something like this:

The CSS for the box follows:

#box{
 display: block;
 position: absolute;top: 50%;
 left: 50%;
 width: 600px;
 margin-top: -200px;
 margin-left: -300px;
}

And we can put whatever we want in the box, in a div tag:

<div id=”box”> Content can go here </div>

And that’s all there is to it. Nice and easy and not as messy as trying to guess at it. If you have another way to do it, post a comment.