Centering an element with CSS is not a simple matter—the same valid CSS centering setting behaves differently in different browsers. Let’s first take a look at several common methods in CSS to center elements horizontally.
1. Use automatic margins to achieve centering. The preferred way to center an element horizontally in CSS is to use the margin attribute—just set the margin-left and margin-right attributes of the element to auto. In actual use, we can create a div that acts as a container for these elements that need to be centered. One thing to note in particular is that the width must be specified for the container:
div#container {
margin-left: auto;
margin-right: auto;
width: 168px;
}
This method works very well in most major browsers, even IE6 on the Windows platform, in its standards compatibility mode ( Compliance mode) can also be displayed normally. But unfortunately, in lower versions of IE, this setting does not achieve the centering effect. Therefore, if you want to use this method in actual projects, you must ensure that the user's IE browser version is not lower than 6.0.
Although support is less than ideal, most designers recommend using this approach whenever possible. This method is also considered to be the most correct and reasonable among various methods to achieve horizontal centering of elements using CSS.
2. Use text-align to achieve centering. Another way to achieve centering of elements is to use the text-align attribute. Set the attribute value to center and apply it to the body element. This approach is a complete hack, but it is compatible with most browsers, so it is naturally necessary in some cases.
The reason why it is called a hack is that this method does not apply the text attribute to the text, but to the element that is the container. This also creates extra work for us. After creating the necessary divs for the layout, we need to apply the text-align attribute to the body according to the following code:
body{
text-align:center;
}
Will there be any problems after that? All descendant elements of body will be displayed centered.
Therefore, we need to write another rule to return the text to the default left alignment:
p {
text-align:left;
}
You can imagine that this additional rule will cause some inconvenience. In addition, browsers that truly fully comply with the standards will not change the position of the container, but will only center the text within it.
3. Use automatic margins and text alignment in combination. Because the text alignment and centering method has good backward compatibility, and the automatic margin method is also supported by most contemporary browsers, many designers use a combination of the two in order to make Centering effects get maximum cross-browser support:
body {
text-align: center;
}
#container {
margin-left: auto;
margin-right: auto;
border: 1px solid red;
width: 168px;
text-align: left
}
But this is still a hack, and it's not perfect by any means. We still need to write additional rules for centering the text in the container, but at least it looks good across browsers.
4. Negative margin solution The negative margin solution is far more than just adding negative margins to elements. This method requires using both absolute positioning and negative margins.
The following is the specific implementation method of this solution. First, create a container that contains the centered element, then absolutely position it 50% from the left edge of the page. This way, the container's left margin will start at 50% of the page width.
Then, set the container's left margin value to a negative half of the container's width. This will anchor the container at the horizontal midpoint of the page.
#container {
background: #ffc url(mid.jpg) repeat-y center;
position: absolute;
left: 50%;
width: 760px;
margin-left: -380px;
}
See, there's no hack! While this isn't the preferred solution, it's a good approach and works extremely well - it even works in Netscape Navigator 4.x without any problems, which is surprising, isn't it? So if you want the widest browser support, this method will be the best choice.