Set margin:0 Auto in CSS; Reason analysis of Invalid horizontal center

Many beginners to make Web pages of friends, may encounter a common problem, is to add margin:0 Auto in CSS, but no effect, can not center the issue, margin:0 auto; The meaning is: the upper and lower boundary is 0, the left and right according to the width of the self-adaptation, in fact, the meaning of the horizontal center, Here are two typical errors caused by a problem that cannot be centered:

1. No width set

<div style= "margin:0 auto;" ></div>

Look at the above code, not set the width of the div at all, how to adapt to the width? The novice is more likely to ignore the problem.

2. No statement doctype

1) DOCTYPE is shorthand for document type, which is used in web design to illustrate what version of XHTML or HTML you are using. To create a standard-compliant web page, the DOCTYPE statement is an essential part of the key.

2) Look at the code below, is it familiar? Like this, at the top of the document, all the clutter above the code is used to declare DOCTYPE:

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

3) You have three options for declaring DOCTYPE

* Transition (Transitional): A very loose DTD is required, which allows you to continue to use HTML4.01 's identity (but to conform to XHTML notation), the complete code is as follows:

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

* Strict (STRICT): Requires strict DTD, you cannot use any of the presentation layer's identity and attributes, such as <br>, the complete code is as follows:

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

* Framework (Frameset): specifically for the framework page design used by the DTD, if your page contains a framework, you need to adopt this DTD, the complete code is as follows:

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

4) As for which to choose, the use of the transition is possible.

Said for a long while, margin:0 Atuo; Do not work, can not center the words, look at the top of your document there is no declaration doctype, do not copy and paste a bit, you can.

There is margin:0 auto; and Margin-left:auto; Margin-right:auto, the actual effect of time is not the same, the reason may be that setting the height of margin-top is not 0 o'clock, there will be unexpected effect.

