Element Horizontal Center Scheme complete _css/html

First look at me a simple xhtml/html file code (part), our goal is to let the #container horizontal center.

Content

Lorem?ipsum?dolor?sit?amet,?consectetuer?adipiscing?elit. Phasellus?varius?eleifend.

Using adaptive boundaries (Auto?margin)
The preferred way to center any element horizontally is to use the boundary (margin) property and set the left and right values to auto. But you must specify a width for #container.

Div#container? {
Margin-left:?auto;
Margin-right:?auto;
width:?168px;
}
This scheme works on any contemporary browser, even if it is IE6, if it is in Web Standard compatibility mode (Compliance?mode). Unfortunately, it does not work in previous versions of Ie/win. Let's make a table for this:

Browse the list of adaptive boundary support? Browser version? Support?
Internet Explorer 6.0, Compliance?mode?
Internet Explorer 6.0, Quirks?mode?
Internet Explorer 5.5 Windows?
Internet Explorer 5.0 Windows?
Internet Explorer 5.2 Macintosh?
All current versions of Mozilla?
Mozilla Firefox? All versions?
Netscape?4.x?
netscape?6.x+, huh?
opera?6.0,?7.0? Macintosh?and? What is Windows?
safari?1.2, huh?

Despite the limitations of browser support, most designers encourage you to do as much as you can. But we can still use CSS to cope with everything.

Using text flow (text-align)
This scenario needs to use the Text-align property, which is applied to the BODY element and gives the center value.

body{
Text-align:center;
}
It treats all kinds of browsers fairly and completely, at their fingertips. However, this is given the nature of the text, which makes the text in the #container also centered. So we have to do some extra work on the layout:

div#container{
Text-align:?left;
}
This way, you can return the text alignment to the default state.

Integrated borders and text permutations
Because text permutations are backwards compatible, modern browsers also support adaptive boundaries, and many designers combine them for cross-browser use.

body{
Text-align:?center;
}
#container? {
Margin-left:?auto;
Margin-right:?auto;
border:?1px?solid?red;
width:?168px;
Text-align:?left
}
Alas, still imperfect, because still a hack skill? (hack). You have to write the extra rules for the text arrangement. But now, we can use a more perfect cross-browser scenario.

Negative boundary solution
This scenario has to be combined with absolute positioning (absolute?positioning?). First, the #container is absolutely positioned and left offset by 50%, so that #container的左边界就是页面分辨率的一半. Next, set the left edge of the #container to a negative value that is half the width of the #container.

#container? {
Background: #ffc? URL (mid.jpg)? Repeat-y?center;
Position:?absolute;
left:?50%;
width:?760px;
margin-left:?-380px;
}
Look, no hack tricks (no?hacks)! Even netscape?4.x are supported!

