One day after another I'm having the problem of centering content in the middle of a web-page.

My default way was to enclose the whole page in <center>-tags and put matching content into it - but there're some problems with that.

But from time to time there has been some kind of solution using the "margin"-style-property. The problem: Sometimes it worked - but sometimes it didn't - here it is how you have to do it:

margin:0 auto

With this combination you tell the page "take care of the distance of the content on the left and the right side, so that they match each other.".

Explanation: The first value combines the properties margin-top and -bottom, while the second value combines the -left and -right values.

To get that working there's only one very important thing you have to remember. If you use only this property, the browser will take ALL THE PLACE IT GETS - and that means that it will just fill the whole page with the content and say "ok - space filled - no margin needed". To prevent this you have to set a specific width for the content of the page:

width: Xpx (X = numeric value for the content width)

If you use both style-properties in the tag of the main-content element, it will center automatically (no matter how wide the window is).

Hint: If you're working with the <center>-tag - that also works great - you only have to align the content manually again (e.g. if you don't want the text to be centered, you have to say "text-align:left".