Section 24.1. Centering a Page

24.1. Centering a Page

As a strategy for controlling the width of a page while allowing for varying monitor resolutions, it is common for web designers to create fixed-width pages that are then centered in the width of the browser window. In the past, this was achieved by slapping a center tag (or <div align="center">...</div>) around a table. In this section, we'll look at three CSS methods for centering a fixed-width page: the official CSS way, a way that works in Internet Explorer, and an effective "hack." All three examples have the effect shown in Figure 24-1.

Figure 24-1. Centering a fixed-width page element

In CSS, the proper way to center a fixed-width element is to specify a width for the element that contains all the page's contents (a div is the usual choice), and then set the left and right margins to auto. According to the CSS visual formatting model, this will have the net effect of centering the element in the initial containing block.

    div#page {       width: 
500px
;       margin-left: auto;       margin-right: auto; } 

This method works for all current standards-compliant browsers, including Internet Explorer 6 for Windows when it is in "Standards" mode (see Chapter 2 about triggering standards-compliance mode in browsers using the DOCTYPE declaration). It will not work with in IE 6/Windows in "Quirks" mode or any earlier version.

An alternative, yet inelegant, solution is to center the whole page using the text-align property on the body element. This technique ultimately amounts to a hack, because it takes a text property and uses it to center any number of items.

The problem with this method is that because horizontal alignment is inherited, all the text on the page will be centered in its element boxes. It is necessary to override the inherited centering by also specifying left alignment for every descendant of the body element. In this example, the universal selector (*) targets all elements that appear within the body of the document and sets text-align to left. Notice also that the margin-left and margin-right values have been replaced in the example with the margin shorthand property. Although not necessary, this reduces the amount of code and keeps the style sheet lean and mean.

     body { text-align: center ; }           body * {text-align: left; }           div#page {        width: 500px ;        margin: 0 auto; } 

The third centering method uses negative margins to effectively center a containing block on the page for all browsers that support basic absolute positioning (including Netscape 4). First, the "page" (the name of the div in the examples) is absolutely positioned so its left edge is 50% across the initial containing block (i.e., the width of the browser window). Then, a negative left margin is applied that pulls the page back to the left by half its width, thus aligning the midpoint of the block with the midpoint of the window. And voilà, it's centered. (This method is taken from The Zen of CSS Design by Dave Shea and Molly E. Holzschlag [Peachpit Press]. It was originally used by Jon Hicks in his Zen Garden submission.)

     div#page {        position: absolute;        left: 50%        width: 500px ;        margin-left: - 250px ; }    /* half the width measurement */