How To Center A Page With CSS

One question I am beginning to see more and more is how to center web pages. Here is some quick code:

.main {
margin: 0 auto;
width: 800px;
background-color: #aaaaaa;
}

<div class="main">
Look, I'm Centered!
</div>

The code is pretty self explanatory. The .main CSS class has its left/right margin set to “auto”, which will place that section right smack in the middle. The text is not centered, it is still aligned to the left. Here is an example of this in action:

The code is pretty compatible and works on every modern browser.

Please subscribe, or else I will cry. Do you really want to make a programmer cry?