CSS in how to let Div center in person to test the conclusion

how CSS aligns the div layer horizontally
Today, I encountered a very difficult problem with CSS, Div itself does not define its own center attribute,
Many methods on the Internet are introduced using superior text-align:center and then nesting a layer of div to solve the problem.
But is it actually such a method of science?
After the network search and personal experiment came to the following conclusions:
The correct settings that have no effect on the page structure are as follows:
Add the following properties to the DIV layer that needs to be centered horizontally:

Copy Code code as follows:


Margin-left:auto;


Margin-right:auto;

After such a setup problem seems to be resolved, in the FF has been centered, but in IE see unexpectedly still not centered!
Depressed for an afternoon, is to find no problems, but also specifically compared to the online article is exactly the same.
What exactly is the problem?
Thanks to friends Lotte useless help to find out the cause of this weird problem.
It turns out that L-blog doesn't have a DTD in front of HTML by default, so IE interprets the document in HTML instead of XHTML.
The problem is not in CSS but in the XHTML page itself.
You need to add such a code to make the above settings effective:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Consult the documentation if you want more stringent XHTML 1.0 Strict or XHTML 1.1.
These tests are based on the Windows XP SP2 version IE6 and Firefox 1.0 final version.

How do I make a div centered

The main style definitions are as follows:

Copy Code code as follows:


body {text-align:center;}


#center {Margin-right:auto; Margin-left:auto; }

Description
First, the parent element defines text-align:center, which means that the content within the parent element is centered, and for IE this setting is OK. But you can't center in Mozilla. The solution is to add "Margin-right:auto" when the child element definition is set; Margin-left:auto; ”
It should be explained that if you want to use this method to make the whole page centered, it is recommended not to set in a Div, you can split out multiple div, only
To define Margin-right:auto in each div that is pulled out; Margin-left:auto; It's OK.

How to align a picture vertically in a div, using the background method. Example:
Body{background:url (logo_w3cn_194x79.gif) #FFF No-repeat Center;

The key is the final center, which defines the location of the picture. It can also be written as "top left" or "bottom right", or you can write the value "50 30" directly.

How do I align text vertically in a div
If it is text, you cannot use the background method, you can use to increase the line spacing to achieve vertical center, complete code as follows:

Copy Code code as follows:


&lt;html&gt;


&lt;head&gt;


&lt;style&gt;


Body{text-align:center;}


#center {margin-right:auto;


Margin-left:auto;


height:200px;


background: #F00;


width:400px;


Vertical-align:middle;


line-height:200px;


}


&lt;/style&gt;


&lt;/head&gt;


&lt;body &gt;


&lt;div id= "center" &gt;&lt;p&gt;test content&lt;/p&gt;&lt;/div&gt;


&lt;/body&gt;


&lt;/html&gt;

Description
Vertical-align:middle indicates that the line is centered vertically, we increase the spacing to be as high as the entire Div line-height:200px, and then insert the text and center it vertically.
Css+div Control page Elements Vertically center code global and area vertically

Copy Code code as follows:


&lt;style type= "Text/css" media=screen&gt;


Body


{


Text-align:center;


}


#a


{


width:200px;


height:400px;


background: #000;


}


#b


{


margin-top:expression ((a.clientheight-50)/2);


width:50px;


height:50px;


Background: #FFF;


}


#c


{


Position:absolute;


left:expression ((body.clientwidth-50)/2);


top:expression ((body.clientheight-50)/2);


width:50px;


height:50px;


background: #F00;


}


&lt;/style&gt;


&lt;div id= "a" &gt;


&lt;div id= "B" &gt;&lt;/div&gt;


&lt;/div&gt;


&lt;div id= "C" &gt;&lt;/div&gt;

Another method:

Copy Code code as follows:

<div style= "Background:blue;position:absolute;left:expression ((BODY.CLIENTWIDTH-50)/2); Top:expression ( BODY.CLIENTHEIGHT-50)/2); width:50;height:50 "></div>