DIV CSS makes layer level center
with CSS today run into a tricky problem, DIV itself is not defined in the attribute, the Internet a lot of methods are introduced with the superior of the text - align: center and then a layer of DIV nested to solve the problem.
but in fact this way science?
after a web search and personally experiment to the following conclusion:
the right also has no effect on page construction set is as follows:
DIV layer centered on the levels need to add the following attributes:

  code is as follows:  


margin - left: auto;
margin - right: auto;

after such a setup problem seems to be solved, has been centered in FF, but in Internet explorer unexpectedly still no center!
depressed for an afternoon, it is can not find out the problem, also especially compared the online article actually same.
where is the problem really out?
thank netizen lotte useless to help find out the causes of this self-help problem.
it is L - Blog default not plus in front of the HTML DTD, and IE is explained in HTML instead of XHTML document.
the problem is not in the CSS and XHTML web page itself.
need to add this code to make these Settings have effect:

  code is as follows:  


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

if you want more Strict XHTML 1.0 Strict or XHTML 1.0 please refer to the related document.
the above tests are based on Windows XP SP2 version of Internet explorer 6 and FireFox 1.0 is the final version.

how to make the DIV center

the main styles are defined as follows:
body {TEXT - ALIGN: center; }
# center {MARGIN - RIGHT: auto; MARGIN - LEFT: auto; }
we commonly used margin or short written

  code is as follows:  


body {TEXT - ALIGN: center; }
# center {margin: 0 auto; }

note:
in the first place in the parent element defines the TEXT - ALIGN: center; This means the parent element within the center content; For this IE setting has been ok. But can't centered in mozilla. When the solution is when child element definition set plus &other; Margin - right: auto; MARGIN - LEFT: auto; Throughout the &;
to be sure, if you want to use this method to make the whole page to center, set in a DIV is not recommended, you can in turn down multiple DIV, only
to define MARGIN in each DIV down - RIGHT: auto; MARGIN - LEFT: auto; Is ok.

how to make pictures in the DIV vertical center, with the background of the method. Example:
body {BACKGROUND: url (http://www.w3cn.org/style/001/logo_w3cn_194x79.gif) # FFF no - repeat center; }

the key is the center of this parameter defines the location of the picture. Can also be written &other; Top left” (top left) or " Bottom right" Etc., can also write directly numerical " 50 30 "

how to make the text centered vertically in the DIV
if it is a word, it can't use background method, which can be used to increase flexibility to achieve vertical center spacing, the complete code is as follows:

tip: you can modify the first part of the code to run
note:
vertical - align: middle; Said the inline vertical center, we will increase to as tall as the DIV line spacing, height: 200 px; And then inserted into the text, vertical center.

CSS + DIV control elements in the global and regional vertical center vertical center code

  code is as follows:  


<Style type="text/CSS" media=screen>
body
{
text - align: center;
}

a # {
width: 200 px;
height: 400 px;
background: # 000;
}

{# b
margin - top: expression ((a.c lientHeight - 50)/2);
width: 50 px;
height: 50 px;
background: # FFF;
}

c # {
position: absolute;
left: expression (body. ClientWidth - 50)/2);
top: expression ((body. ClientHeight - 50)/2);
width: 50 px;
height: 50 px;
background: # F00;
}
</style>
<Div id="a" >
<Div id="b" > </div>
</div>
<Div id="c" > </div>

another method: through the CSS expression, comparison for the client CPU, not recommended

  code is as follows:  


<Div style="background: blue; the position: absolute; left: expression ((body. ClientWidth - 50)/2); the top: expression (body. ClientHeight - 50)/(2), width: 50; height: 50" > </div>

2, use JS to make layer center

code is as follows:


<DIV id=L1 style="HEIGHT: 107 px; LEFT: 341 px, POSITION: absolute; TOP: 585 px; WIDTH: 205 px; Z - INDEX: 1" >
<TABLE bgColor=# FFFFFF border=1 borderColorDark=# FFFFFF borderColorLight=# 000000 cellSpacing=0 cellPadding=0 width="100%" >
<Tr>
<TD width=178 height=1 > Material net </td>
<TD align=middle
style="CURSOR: hand" width=21 > х </td> </tr>
<The TR vAlign=top>
<TD colSpan=2
height=91 > Welcome to this site!
this website domain name:
<A href="" target=" _blank "> </a>
</td> </tr> </table> </div>
<Script language="javascript" >
function moveit ()//this function is used to put layer in between browser
{
L1. Style. Left=((the document. The body. The offsetWidth - parseFloat (L1) style. The width))/2). The document body. ScrollLeft;
L1. Style. The top=((document. Body. OffsetHeight - parseFloat (L1) style) height))/2). The document body. The scrollTop;
}
window. The onload=moveit;//open net surface always perform moveit ()
window. The onresize=moveit;//executive moveit when adjusting the browser size ()
window. The onscroll=moveit;//perform moveit when pull the scroll bar ()
</script>

3, centered with positioning method
# 0 - #


This concludes the body part