CSS page Layout div horizontally centered various methods

page layouts in Web standards are implemented using DIV with CSS. This is the most commonly used to make the entire page horizontally centered effect, which is the basic page layout, but also the most should master the knowledge. However, often people ask this question, here I briefly summarize the use of Div and CSS to achieve the horizontal center of the page method:

Margin:auto 0 and Text-aligh:center

In modern browsers (such as Internet Explorer 7, Firefox, opera, etc.) modern browser to achieve horizontal center is simple, as long as the left and right side of the blank to automatically. means:

#wrap {margin:0 Auto;}

The above code means that wrap this div to the left and right sides of the distance automatically set, up and down 0 (can be arbitrary). Run your current code in a modern browser such as Internet Explorer 7, Firefox, opera, and so on:

! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

New Document
Div#wrap {
width:760px;
margin:0 Auto;
border:1px solid #333;
Background-color: #ccc;
}

In Firefox and other modern browser settings page elements of the horizontal center, as long as the specified margin:0 auto;

Div#wrap {
width:760px;
margin:0 Auto; /* Here 0 can be any value * *
border:1px solid #ccc;
Background-color: #999;
}

The effect is very good. But it doesn't work in Internet Explorer 6 and the corrected version, but luckily it has its own solution. The Text-align property in Internet Explorer is inheritable, that is, when set in the parent element, it defaults to the attribute in the child element. So we can set the Text-align property value to center in the Body tab so that all the elements in the page are centered automatically, and we have to add a hook to turn the text in the page into our usual reading style-left-aligned. So we're going to write code like this:

body {text-align:center;}
#wrap {text-align:left;}

This makes it easy to center the div in Internet Explorer. So to show the center effect in all browsers, we can write our code like this:

body {text-align:center;}
#wrap {text-align:left;
margin:0 Auto;
}
! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Css+div to achieve horizontally centered page layouts
body {text-align:center;}
Div#wrap {
Text-align:left;
width:760px;
margin:0 Auto;
border:1px solid #333;
Background-color: #ccc;
}

In Firefox and other modern browser settings page elements of the horizontal center, as long as the specified margin:0 auto;

Div#wrap {
width:760px;
margin:0 Auto; /* Here 0 can be any value * *
border:1px solid #ccc;
Background-color: #999;
}

In the version of Internet Explorer 6 and below, we will also make the following settings:

body {text-align:center;}
Div#wrap {
Text-align:left;
}

But here's the premise of setting the centered element to have a fixed width, like here we set it to 760 pixels.