body {
    background-color: #CCD3D9;
    color: #000000;
    text-align: center;
}
#content {
    width: 630px;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid #A6B2BC;
    background-color: #FFFFFF;
    color: #000000;
    padding: 0 20px 0 20px;
    text-align: left;
}

This technique allows you to center a box easily, and is ideal if you need to center a content block on a page.

When we set both the left and right margins to auto, we are asking the browser to calculate the margins necessary to make them equal, thereby centering the box. In “How do I create a fixed-width, centered, two-column layout?”, we’ll see how to create a layout inside a container that has been centered in this way.

The example code provided here contains additional CSS that works around a bug in IE 5.x that prevents the margins from centering content. By setting textalign: center on the body, then setting it back again (text-align: left) on the content <div>, we are able to work around the problem, allowing the layout to center in these browsers as well.