1. With the table feature, when width and height all set 100%, the container can be nested inside the TD to form an absolute center, at this time the nested container can be absolute or relative size. (Non-standard) note cannot be declared!
If you want to add style body,html{height:100%;p adding:0;margin:0 in standard mode;}
<table width= "100%" height= "100%" border= "0" align= "center" cellpadding= "0" cellspacing= "0" >
<tr>
<TD style= "Text-align:center;" >
<table width= "height=" border= "0" cellpadding= "0" cellspacing= "0" bgcolor= "#ef1122" >
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
2. Using the negative margin method, absolute positioning makes the container relative to the screen absolutely centered, at this time the nested container can only be absolute size. (standard) based on margin negative and top left proportional control, to achieve absolute center with the screen, the container size changes need to readjust margin top left parameters:
<div style= "background: #f00; width:740px; height:340px; left:50%; margin:-170px 0 0-370px; Position:absolute; top:50%; " >
</div>
3. The alternative method given by the foreigner,
clever use of display:inline-block;IE6.0 test passed. Standard
Note that 1.height:100% is the key: 2.edge does not have a nested relationship with container:
This should be considered a bug in IE, the individual has limited understanding of display:inline-block. Edge can be regarded as a fill, container is now a top and bottom center object, add the background color can see more clearly, of course you can also add any absolute or relative size container within the container. The problem is that span is just an inline element, and adding block-level elements inside is not a standard logic.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "<a href=" http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "target=" _blank ">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>" >
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/><br>
<title> Untitled Document </title>
<style type= "Text/css" >
<!--body {margin:0; height:100%;}
#edge {width:0; height:100%; display:inline-block; vertical-align:middle;} #container {text-align:center; width:100%; display:inline-block; vertical-align:middle;} -
</style>
<body>
<!--required for xhtml1.1 validation--
<span id= "Edge" ></span><span id= "container" >
<div style= "width:200px; height:50px; Background: #f00; line-height:50px; " > Only in the IE6.0 environment to achieve </div>
</span>
</body>
4.CSS Behavior Expression_r_r control is implemented, but Expression_r_r is unique to IE and consumes serious resources, especially when used in large quantities. (Standard)
Pay attention to the key definitions and don't assume that height:100% is useless inside ie:
Get the screen height and width value in real time, minus the container's height and width and divide by 2 to get the exact coordinates absolutely:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "<a href=" http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "target=" _blank ">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>" >
<title> Untitled document </title><style type= "Text/css" >
<!--html,body {height:100%;} --></style>
<body>
<div style= "background: #f00; Position:absolute; Left:expression_r_r ((BODY.CLIENTWIDTH-50)/2); Top:expression_r_r ((BODY.CLIENTHEIGHT-50)/2); width:50px;; height:50px; " ></div>
</body>
5.ff1.5 test Pass, absolute positioning, margin is proportional, at this time the container aspect is always viewport 50% relative size (standard):
<div style= "Position:absolute; top:0; right:0; bottom:0; left:0; width:50%; height:50%; Margin:auto; Background: #f00; Color:white; line-height:20px; Text-align:center; " >ff1.5 Test through </div>
6.ff1.5 test through, absolute positioning, directly positioned up and down, forcing the edge of the container to achieve the relative size (standard):
Code: Slightly
7.ff1.5 IE5 IE6 passed the test
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "//www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>vertical centering in valid css</title>
<style type= "Text/css" >
body {padding:0; margin:0; font-size:75%; line-height:140%; font-family:arial, Helvetica, Sans-serif;}
body,html{height:100%;}
A{color: #333;}
A:hover{color:green;}
#outer {height:100%; overflow:hidden; position:relative;width:100%; background:ivory;}
#outer [id] {display:table; position:static;}
#middle {position:absolute; top:50%;text-align:center;}
#middle [id] {display:table-cell; vertical-align:middle; position:static;}
#inner {position:relative; top: -50%;width:600px;margin:0 auto;text-align:left;}
Div.greenborder {border:1px solid green; #FFF;}
P{margin:1em;}
</style>
<script type= "Text/javascript" >
<! [cdata[
function Togglecontent (name,n) {
var i,t= ' "", "" "" "," "" "," "", el = Document.getelementbyidx (name);
if (!el.origcont) El.origcont = el.innerhtml;
for (i=0;i<n;i) t = El.origcont;
el.innerhtml = t;
}
]]>
</script>
<body>
<div id= "outer" >
<div id= "Middle" >
<div id= "inner" class= "Greenborder" >
<p><a href= "Javascript:togglecontent (" "" "" "" "" Inner "" "" "" "" "" "1" > Default length </a> <a href= "Javascript:togglecontent (" "" "" "" "" "Inner" "" "" "" "" "" "" "" 2 "> Extended page </a></p>
<p> 1. Open illustrator, create a new file, draw a rectangle that is larger than the picture you want to import, and fill it with white. <br/>
2. Select the Rectangle, Menu: Effect > Distort & Transform > Zig Zag, set as. <br/>
3. Menu: Effect > Stylize > Drop Shadow, set as. <br/>
1. Open Illustrator, create a new file, draw a rectangle that is larger than the picture you want to import, and fill it with white. <br/>
2. Select the Rectangle, Menu: Effect > Distort & Transform > Zig Zag, set as. <br/>
3. Menu: Effect > Stylize > Drop Shadow, set as. </p>
<address style= "Text-align:center; padding:. 5em; Clear:left; " >
Design by <a href= "//www.webjx.com" >Webjx</a> this demo takes <a href= "//www.creativecommons.cn/" > Authoring Sharing Authorization < /a>--signature and non-commercial use.
</address>
</div>
</div>
</div>
<script src= "//www.google-analytics.com/urchin.js" type= "Text/javascript" >
</script>
<script type= "Text/javascript" >
_uacct = "Ua-152060-1";
Urchintracker ();
</script>
<noscript><p>google-analytics</p></noscript>
<script src= "//www.webjx.com/*/*.js" type= "Text/javascript" ></script>
<noscript><p>stat.</p></noscript>
</body>
8. Using Expression_r_r (ie only)
<div style= "Background:blue;position:absolute;left:expression_r_r ((BODY.CLIENTWIDTH-50)/2); top:expression_r_ R ((body.clientheight-50)/2); width:50;height:50 "></div>
9.
<style>div{position:absolute;top:50%;left:50%;margin:-100px 0 0-100px;width:200px;height:200px;background: #000; filter:progid:DXImageTransform.Microsoft.Gradient (Gradienttype=0,startcolorstr=green,endcolorstr=cyan);} Body{filter:progid:dximagetransform.microsoft.gradient (Gradienttype=0,startcolorstr=green,endcolorstr=cyan);} </style><div>
<br><center>
<br>
<style>
#a {font-size:18px;font-family: Chinese Xingkai; Color:cyan;filter:dropshadow (offx=2,offy=2,direction=135,color= #001199); width:200;}
#b {font-size:32px;font-family: official script; color: #09fa09; Filter:shadow (direction=135,color=green,strength=3); width:899;}
</style>
<a id= "A" > Center </a>
</div>
</body>
Several ways to center the screen (DIV/CSS) (GO)
