You have certainly observed while surfing over the internet, that there are some websites which have their content on the left of your browser’s screen and some other websites place their content in the center.

From my experience, people prefer to place their website in the center of the browser’s window, giving a more balanced look and feel. I certainly prefer having the content in the center.

So, how do you do it?

Step 1

Open up DreamWeaver or HTML-Kit or your favourite text editor (notepad is the best, by far) and insert the doctype for your website. Always insert a doctype, don’t omit it because we design valid websites, don’t we?

Go here for a selection of doctypes and their declaration.

Next open up the head tags and insert a title, meta data and style, and the close the head tags. (If you don’t know how to do this, search for “html head tags”). The name of the CSS file will be “main.css” so in your style tag, link to the main.css. There are various ways to do this, here is mine:

<style type=”text/css” media=”screen”>

@import “main.css”;

</style>

Step 2

The trick to center the content is to wrap it inside a div, which will be your container. So, add this code inside the body tags:

<div id=”container”>

This is some centered text!

</div>

You should be able to see this in your browser:

Step 3

Now we have to style the content. Open up your CSS with your favourite editor and type in:

#container{width: 790px; margin:0 auto;}

The “width:790px” is the width of the container and the “margin:0 auto;” is the margin of it. You define the margin based on a pattern which goes: TOP RIGHT BOTTOM LEFT.

So for example if I want to make the margin of the container have 10px on the left and 20px on the bottom I’d write:

margin: 0 0 20px 10px;

If I want to make it have 10px top and bottom and 30px left and right, I‘d write:

margin: 10px 30px 10px 30px;

OR

margin: 10px 30px;

Refresh your browser and see the results.

“Whaaat? The text not centered!!!”

I hear you say! Don’t worry, read on!

Step 4

Just add the following code to your CSS:

text-align: center;

There, you are done now!

“Couldn’t I just add the “text-align:center”, removing the container div and have the content of my website centered as well?”

No because then you would be forced to have all your text centered! And if you then want to add a text on the left of your centered website?

View the difference below:

With this method, any browser from resolution size 800×600 to 2000000×2000000 will see your website in the center of their browser window. Try resizing your browser window to see what I mean!

Remember: Although less than 7% of the internet users are using a resolution of 800×600, that doesn’t mean that you have to remove them from the list! Moreover, people don’t always browse with their browser window maximized, so beware of your resolution choices!

Download the source file used in this tutorial: DOWNLOAD SOURCE FILES