Summary of horizontal center layout of CSS + Div pages

I. Margin: auto 0 and text-aligh: Center
In modern browsers (such as Internet Explorer 7, Firefox, and opera), the method of implementing horizontal center in modern browsers is very simple, as long as the blank spaces on both sides of the left and right are set to automatic. Meaning:
# Wrap {margin: 0 auto ;}
# Wrap {margin: 0 auto ;}
The code above indicates that the distance between the DIV of wrap and the left and right sides is automatically set, and the upper and lower values are 0 (which can be arbitrary ). Please go to the modern Browser
(Such as Internet Explorer 7, Firefox, and opera:
The above results are very good. However, this does not work in Internet Explorer 6 and the correct version, but fortunately it has its own solution. In Internet Explorer, the text-align attribute can be inherited, that is, it is set in the parent element and has this attribute by default in the child element. Therefore, you can set the text-align attribute value to center in the body label so that all elements on the page are automatically centered, at the same time, we also need to add a hook to turn the text in the page into the reading method we are used to-align left. Therefore, we need to write the code as follows:
View plaincopy to clipboardprint?
Body {text-align: center ;}
# Wrap {text-align: Left ;}
Body {text-align: center ;}# wrap {text-align: Left ;}
In this way, we can easily align the DIV center in Internet Explorer. Therefore, to show the center effect in all browsers, we can write our Code as follows:
View plaincopy to clipboardprint?
Body {text-align: center ;}
# Wrap {text-align: left;
Margin: 0 auto;
}
Body {text-align: center ;}# wrap {text-align: Left; margin: 0 auto ;}
However, there is a premise that the elements in the center must have a fixed width. For example, we have set it to 760 pixels.

2. Relative positioning and negative margin

Perform relative positioning for wrap and use a negative margin to offset the offset. This method is relatively simple and easy to implement:
# Wrap {
Position: relative;
Width: 760px;
Left: 50%;
Margin-left:-pixel PX
}
# Wrap {position: relative; width: 760px; left: 50%; margin-left:-pixel PX}
This Code indicates that the position of wrap is relative to the body tag of its parent element, and then the left border is moved to the center of the page (that is, left: 50% ); at last, we offset the center to the left to return the half distance, so that the horizontal center is realized.
Similarly, you need to set a fixed width before setting the horizontal center.
Which method is used?
Which of the above two methods is better? The hack technology seems to be used in the first method, but it does not. It is a well-defined standard web Writing Method and fully complies with the specifications. Therefore, you can select either of the two methods as needed. They do not have the problem of CSS hack.

Iii. Other center Methods
All of the above are the implementations in the same environment when the specific width is set. Sometimes we want to make an elastic layout, or when an element is in a container, we just want to center it and don't want to set a specific width. In fact, this is not a true center layout. For an element with a length of 100%, do you think it is centered or left-aligned? Therefore, none of the Low-width residences are truly centered. In this design, we use padding like an element to set it. In reality, we changed the container size of the parent element:
If we want the length of the wrap element to change with the window while maintaining the center, we can write as follows:
Body {
Padding: 10px 150px;
}
Body {padding: 10px 150px ;}
Here, we only need to fill the left and right sides of the parent Element