[CSS/DIV] Perfectly solves CSS page horizontal centering

A common CSS method of centering elements horizontally

Centering elements with CSS is not a trivial matter - the same legitimate CSS centering settings behave differently in different browsers. Let's start by looking at a few common ways to center elements horizontally in CSS.

1. Centering with automatic margins

The preferred way to center elements horizontally in CSS is to use the margin property—just set the margin-left and margin-right properties to auto. In practical use, we can create a container div for these elements that need to be centered. One thing to note is that the width of the container must be specified:

div#container{ margin-left:auto; margin-right:auto; width:168px; }

This approach works very well in most major browsers, even IE6 on Windows can display properly in its standard compliance mode. Unfortunately, in lower versions of IE, this setting does not achieve a centering effect. So if you want to use this method in a real project, then make sure that the user's IE browser version is not lower than 6.0.

Despite the lack of support, most designers recommend using this approach as much as possible. This method is also considered the most correct and reasonable of all methods of implementing element level centering with CSS.

2. Use text-align to achieve centering

Another way to achieve element centering is to use the text-align property, set the value of the property to center and apply it to the body element. It's a hack through and through, but it's compatible with most browsers, so it's naturally essential in some cases.

It is called a hack because this method does not apply text properties to the text, but to the element that is the container. This also gives us extra work. After creating the necessary divs for the layout, we need to apply the text-align property to the body according to the following code:

body{ text-align:center; }

Will there be any problems after that? All descendants of the body are centered.

Therefore, we need to write another rule to return the text to the default left-hand alignment:

p{ text-align:left; }

It is conceivable that this additional rule will cause some inconvenience. Also, a browser that truly follows the standard doesn't change the position of the container, but only centers the text in it.

3. Use a combination of automatic margins and text alignment

Because the text alignment centering method has good backward compatibility, and the automatic padding method is also supported by most contemporary browsers, many designers use a combination of the two to maximize cross-browser support for the centering effect:

body{ text-align:center; } #container{ margin-left:auto; margin-right:auto; border:1pxsolidred; width:168px; text-align:left }

But this is always a hack, and it is not perfect by any means. We still need to write additional rules for the text in the centered container, but at least it looks good in various browsers.

4. Negative outer margin solution

Negative margins solutions are far from being as simple as adding negative margins to elements. This method requires the use of both absolute positioning and negative margin techniques.

The following is the specific implementation method of this scheme. First, create a container with centered elements and position it absolutely 50% of the left edge of the page. This way, the container's left margin will start at 50% of the page's width.

Then, set the container's left margin value to half the negative container width. This will fix the container at the midpoint of the horizontal direction of the page.

#container{ background:#ffcurl(mid.jpg)repeat-ycenter; position:absolute; left:50%; width:760px; margin-left:-380px; }

Look, no hacks! While this isn't the preferred solution, it's a good way to do it, and it's very versatile – surprisingly that it doesn't even work in NetscapeNavigator 4.x without any problems, isn't it? So if you want the widest range of browser support, then this method will be the best choice.