Tips for using CSS to center Elements

From: http://www.linji.cn/post/1595/

It is not easy to use CSS to display elements in the center. The same legal CSS center settings show different behaviors in different browsers. Here, I will introduce a good way to center, but before that, let's take a look at the most common method to use CSS center elements.

Center with auto margin

CSS
The preferred way to center the element horizontally is to use the margin attribute -- set the margin-left and margin-right attributes of the element to auto
Yes. In practice, we can create a container Div for these elements that need to be centered. Note that the width must be specified for the container:

Div # Content {</P> <p> margin-left: auto; </P> <p> margin-Right: auto; </P> <p> width: 800px; </P> <p>}

Div # Content {<br/> margin-left: auto; <br/> margin-Right: auto; <br/> width: 800px; <br/>}
In
In most mainstream browsers, This method is very effective, even for IE6 on windows, in its standard compatibility mode (compliance)
Mode. Unfortunately, in earlier versions of Internet Explorer, this setting cannot achieve center effect. Therefore, if you want to use this method in your project, make sure that your
The IE browser version must be no less than 6.0.

The following table lists Common Browser support for auto margin center:

Supported by browser version?
Internet Explorer 7.0 standard compatibility mode is
Internet Explorer 7.0 forward compatibility mode (quirks mode) No
Internet Explorer 6.0 standard compatibility mode is
Internet Explorer forward compatibility mode No
Internet Explorer 5.5 Windows Version no
Internet Explorer 5.0 Windows Version no
Internet Explorer 5.2 for Apple is
All ILA versions are
All current versions of ILA Firefox are
Netscape 4.x No
The version of Netscape 6.x and later is
Opera 6.0 and 7.0 win/Apple versions are
Safari 1.2 is

Despite the unsatisfactory support, most designers suggest using this method as much as possible. This method is also considered to be the most correct and reasonable method for implementing the horizontal center of elements using CSS.

Center using text-align

Another way to center an element is to use the text-align attribute to set the attribute value to center and apply it to the body element. This is a complete hack, but it is compatible with most browsers, so in some cases it is also essential.

It is hack because this method does not apply text attributes to text, but to elements used as windows. This brings us extra work.

After creating the DIV required for the layout, follow the code below to apply the text-align attribute to the body:

Body {<br/> text-align: center; <br/>}

Body {<br/> text-align: center; <br/>}
What problems will happen in the future? All descendant elements of the body are displayed in the center. Therefore, we need to write another rule to align the text back to the default left-aligned position:
P {</P> <p> text-align: Left; <br/>}

P {<br/> text-align: Left; <br/>}
It is conceivable that this additional rule will cause some inconvenience. In addition, browsers that fully follow the standard will not change the container location, but will only display the text in the center.

Combined with automatic padding and text alignment

Because the text alignment and center method has good downward compatibility, and the automatic margin method is also supported by most contemporary browsers, many designers combine the two, in order to maximize cross-browser support for the center effect:

Body {<br/> text-align: center; <br/>}< br/># content {<br/> margin-left: auto; <br/> margin-Right: auto; <br/> border: 1px solid red; <br/> width: 168px; <br/> text-align: left; <br/>}Body {</P> <p> text-align: center; </P> <p >}</P> <p> # Content {</P> <p> margin-left: auto; </P> <p> margin-Right: auto; </P> <p> border: 1px solid red; </P> <p> width: 168px; </P> <p> text-align: Left; </P> <p>}
However, this is always an hack, and it is not perfect in any case. We still need to write additional rules for text in the center container, but at least it looks good in various browsers.

Negative margin Solution

Finally, I will introduce one of my best ways to center: The negative margin solution.

U

Create a container that contains the center element, and then position the container to the position 50% relative to the left edge of the page. In this way, the left margin of the container starts from the position of the page 50% width.

Then, set the left margin of the container to half the width of the negative container. In this way, the container is fixed to the point in the horizontal direction of the page, as follows:

# Content {</P> <p> width: 760px; </P> <p> position: absolute; </P> <p> left: 50%; </P> <p> margin-left:-pixel PX; </P> <p>}