CSS common way to show elements horizontally centered

Using CSS to center the elements is not a simple thing-the same legitimate CSS centered settings in different browsers behave differently. Let's take a look at some of the common CSS methods for centering the elements horizontally.

1. Center with automatic outer margin
The preferred way to center elements horizontally in CSS is to use the margin property-set the Margin-left and Margin-right properties of the element to auto. In practical use, we can create a container-acting div for these elements that need to be centered. One particular point to note is that you must specify a width for the container:
Div#container {

Margin-left:auto;

Margin-right:auto;

width:168px;

}

This approach is very effective in most mainstream browsers, even if it is IE6 on the Windows platform and can be displayed properly under its standard compatibility mode (compliance mode). Unfortunately, in the lower version of IE, this setting does not achieve the center effect. So if you want to use this method in a real project, make sure that the user's IE browser version is no less than 6.0.
Despite the unsatisfactory support, most designers recommend using this method as much as possible. This method is also considered to be the most correct and reasonable one in all kinds of methods of using CSS to achieve the level of the elements.
2. Use Text-align to achieve center
Another way to center an element is to use the Text-align property to set the property value to center and apply it to the BODY element. This approach is downright hack, but it can be compatible with most browsers, so it is naturally necessary in some cases.
It is hack because it does not apply text attributes to text, but instead applies to elements that are containers. This also brings us extra work. After creating the necessary div for the layout, we apply the Text-align attribute to the body as follows:

body{

Text-align:center;

}

Will there be any problems after that? All descendants of the body will be centered.
So we need to write another rule to get the text back to the default left alignment:

p {
Text-align:left;
}

It can be imagined that this additional rule will bring some inconvenience. In addition, browsers that really follow the standard completely do not change the location of the container, but only center the text.
3. Combining automatic outer margin and text alignment
Because the text alignment is well backward-compatible and the automatic margin method is supported by most contemporary browsers, many designers combine the two to maximize Cross-browser support for the center effect:

Body {
Text-align:center;
}
#container {
Margin-left:auto;
Margin-right:auto;
border:1px solid red;
width:168px;
Text-align:left
}

But this is always a hack, in any case not perfect. We still need to write additional rules for the text in the center container, but at least it looks good in every browser.
4. Negative Outer distance solution
A negative outer-margin solution is far more than simply adding negative margins to an element. This approach requires both absolute and negative outer spacing techniques.
The following is a concrete implementation of the scheme. First, create a container that contains the centered element, and then absolutely position it at 50% relative to the left edge of the page. In this way, the left margin of the container starts at the position of the page 50% width.
Then, set the container's left outer margin value to half the width of the negative container. This allows the container to be docked to the midpoint of the horizontal orientation of the page.

#container {
Background: #ffc URL (mid.jpg) repeat-y Center;
Position:absolute;
left:50%;
width:760px;
Margin-left: -380px;
}

Look, there's no hack!. Although this is not the preferred solution, it is a good way to be very adaptable-even in the Netscape Navigator 4.x without any problems, it's amazing, isn't it? So if you want the widest browser support, this approach will be the best choice.