About centered layout and IE double margin bug_CSS/HTML

Today I googled the problem of CSS centered layout, and the results almost all quoted the same article. To center in IE, just define the text-align:center; attribute in the element. In Firefox, a wrapper needs to be defined. Then specify the margin-left:auto;margin-right:auto; properties to center the block in Firefox. In fact, I myself use the margin attribute, which is the abbreviation of margin:auto;, to set the center. The margin abbreviation attribute sets the page margins in four directions in clockwise order: top, right, bottom, and left. It should be noted that if you think based on this that you just want to center the block after setting the margin-top:auto; attribute, then you are wrong. When using this method, the margin-left:auto;margin-right:auto; attributes must be set at the same time to be centered. However, you can also center it by setting margin: 0 auto;.
Another way to center is to use the combination of left: 50% + margin-left: -375px; under the premise of using absolute positioning. The two centering methods are as follows.

Copy code The code is as follows:

/* Method 1 */
body {
background: #00FF7F;
text-align: center; /* hack for ie center alignlayout */
}
#wrapper{
background: Aqua;
width: 750px;
margin:auto; /* or margin-left:auto;margin-right:auto;*/
}
/* Method 2 */
#wrapper2 {
position: absolute;
width:750px;
left:50%;
margin-left:-375px;
background: Orange;
}

I personally always Use method one to center it, because I feel that the blocks in method two lack the necessary rigidity, and the code is not easy to understand. If you reduce the form in Method 2 to a certain limit, you will see that the entire layout will flow. Of course some people want this effect. :), another advantage of method 2 is that there is no need to override the text-align: center; setting of the body element in other nested blocks, because most text will still be left-aligned. This can reduce redundancy to a certain extent. But I think this benefit is negligible. In short, everyone just takes what they need according to their own preferences.

The other is the double margin bug of IE. The solution is to add display:inline; setting. In fact, this parsing error bug will affect many aspects. If you encounter abnormal spacing in CSS layout in IE, you can try adding the attribute declaration of display:inline;. And for certain specific layout issues, you need to use display:block; and display:inline; in combination to make the layout as you want. I encountered a similar problem in a picture menu controlled by an unorder list.

As soon as possible, various browsers have css bugs, but the css page layout method has developed to this day and is relatively mature. The chance of making you crazy because of bugs is no longer high. If you have questions, check the search engine to solve most of your problems. If you can do some experiments during your free time, you may be able to remain calm in emergencies.