This is the most commonly asked question on the forum and as such it makes sense to have a pinned tutorial at the top of all the sections that it has been asked in

Tutorial:
How to center content using CSS

The best way to center a page is to use a wrapper that contains what you want to center, and this can be done in two simple stages.


Stage one- The CSS
Within your css add something that looks like this code:




A quick explanation of what margin: 0 auto; will do


In the body add text-align:center as this will fix a problem that some browsers have with margin:auto. However this will make all the text in anything be centered so to fix this in the wrapper you will tell all the text to go back to the left, this way you are resetting the default position of the text and will place the text left unless you tell it in a different div/class to be otherwise.

in the wrapper, the 0 is there to tell the top and bottom not to have a margin, this can be changed if you want there to be a top and bottom margin.

The auto tells the left and the right to automatically set a margin. So it takes into account the space that remains and divides it between the left and right margins, making the content centered on the page.



Stage two – The HTML

Now that you have the CSS part done all you need to do is apply the wrapper to the HTML. This is simple, anything that you want to be centered on the page shoul be placed inside the wrapper like this:


<div id="wrapper"><!-- Place everything you want to be centred here--></div>



And that is all that you need to do to center something on a page




EDIT:

For a more in depth look check out this tutorial

To vertically center a site check out this tutorial

Thanks club webd for this nice post I just normally create 1 whole div and all the contents and div inside the main div and center it using CSS.