Center an element horizontally with CSS

So you want your website to be in the middle of the page. But you don’t want to use the <center> because it is deprecated and won’t validate.

This is a simple way to align your website layout to the center using just CSS, and it’s valid

The method? Just put margin:0 auto; in the selector of your main bit of content, e.g. for Apple Temple it is #page, which is what contains all the content, sidebar etc.

So for me it would look like this:

#page {
margin:0 auto;
}

I’ll explain what this is doing.

The 0 in the margin is for the top and bottom margin, so there is no margin there.

The auto makes it so the left and right margin are equal, which is what makes it centered.

View a Demo.

For Internet Explorer

I discovered that the above method does not work, but there is still a simple way of putting your contents in the center.

In the the parent selector of the main content (including sidebar, header etc.), put text-align:center;.
Of course this would put all the text in the center. So if you want it back to the left alignment or whichever; in the main content selector, put text-align:left; (or whatever alignment you want it to be).

For me it would be:

body {
text-align:center;
}
#page {
text-align:left;
}

This method only works for IE. So it would be best to apply both methods I’ve mentioned so it works in most major browsers.

View the Demo.