What is the absolute center of the problem? That is, the container to the screen around the top and bottom four directions have spacing, and with the size of the screen is relatively constant or proportional adjustment, always reside in the middle of the screen. Absolute Center also has two conditions, the absolute size and relative size of the container. At the same time there are many ways to achieve, summed up as follows:
1. Using the table feature, in the width and height all set 100%, the container can be nested within the TD to form an absolute center, at which time the nested container can be absolute or relative size. (Non-standard) Note that you cannot add a declaration!
HTML code <textarea id="temp98706" rows="8"><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></textarea>
2. Using the negative margin method, absolute positioning allows the container to be absolutely centered relative to the screen, at which point the nested container can only be absolute size. (standard) based on the margin negative value and the top left proportional control, the implementation is absolutely centered on the screen, and the container size changes the parameters that need to be readjusted margin top left:
HTML code <textarea id="temp6587" rows="8"><div style= "background: #f00; width:740px; height:340px; left:50%; margin:-170px 0 0-370px; position:absolute; top:50%; " ></div></textarea>
3. The foreigner gives the alternative method, cleverly utilizes the display:inline-block;,ie6.0 test to pass. Standard
Note that 1.height:100% is the key: 2.edge has no nesting relationship with container:
This should be regarded as a bug of IE, personal understanding of Display:inline-block is limited. Edge can be considered as a padding, container is now a center object, add a background color to see more clearly, of course, you can also add any absolute or relative size container within the container. But the problem is that span is just an inline element, and adding block-level elements internally is not a standard logic.
HTML code <! doctypehtml Public "-//w3c//dtd XHTML 1.0 transitional//en" "<ahref=" http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "target=" _blank ">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>" ><ptml xmlns= "<a href= http://www.w3.org/1999/xhtml" target= "_blank" >http://www.w3.org/1999/xhtml< /a> "><pead> <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%;d isplay:inline-block; vertical-align:middle;} --></style></pead><body><!--required for xhtml1.1 validation only--><span "Edge" ></span><span id= "container" ><div style= "width:200px"; height:50px; Background: #f00; line-height:50px; " > Only in IE6.0 environment </div></span></body></ptml>
4.CSS Behavior Expression control implementation, but expression is unique to IE, and consumption of serious resources, especially in the time of large use. Standard
Note The key definition, do not think height:100% in IE is useless:
Real-time access to the screen high width, minus the container high width and divided by 2, to obtain accurate coordinates absolute positioning:
HTML code <textarea id="temp33550" rows="8"><! doctypehtml Public "-//w3c//dtd XHTML 1.0 transitional//en" "<ahref=" http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "target=" _blank ">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>" ><ptml xmlns= "<a href= http://www.w3.org/1999/xhtml" target= "_blank" >http://www.w3.org/1999/xhtml< /a> "><pead><metahttp-equiv=" Content-type "content=" text/html; charset=gb2312 "/><title> Untitled document </title><style type=" Text/css "><!--html,body {height:100%;} --></style></pead><body><div style= "background: #f00; Position:absolute;left:expression ((BODY.CLIENTWIDTH-50)/2); Top:expression ((BODY.CLIENTHEIGHT-50)/2); width:50px ;; height:50px; " ></div></body></ptml></textarea>
5.ff1.5 test through, absolute positioning, margin is proportional, at this time the container width always for the viewport 50% relative size (standard):
HTML code <textarea id="temp28614" rows="8"><divstyle= "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 passed </div></textarea>
6.ff1.5 test through, absolute positioning, direct positioning up and down, mandatory edge bureau to achieve the relative size of the container (standard):
7.ff1.5 IE5 IE6 passed the test
HTML code <! doctypehtml Public "-//w3c//dtd XHTML 1.0 strict//en" "//www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd" ><ptml xmlns= "//www.w3.org/1999/xhtml" ><pead><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}/* Forexplorer only*/#middle [id] {Display:table-cell; Vertical-align:middle; Position:static;} #inner {position:relative top: -50%;width:600px;margin:0auto;text-align:left;} /*for Explorer only */div.greenborder {border:1px solid green; Background-color: #FFF;} P{MARGIN:1EM} </style><script type= "tExt/javascript ">//<! [Cdata[function togglecontent (name,n) {var i,t= ', El =document.getelementbyid (name); if (!el.origcont) El.origcont = el.innerhtml; for (i=0;i<n;i++) T + = El.origcont; el.innerhtml = t;} ]]></script></pead><body><div id= "outer" > <div id= "middle" > <div id= "inner" class= "Greenborder" > <p><ahref= "javascript:togglecontent (' inner ', 1)" > Default length </a> <ahref= "javascript:togglecontent (' inner ', 2)" > Extended page </a></p><p> 1. Open illustrator, create a new file, Draw a rectangle, larger than the picture you want to import, and fill with white. <br/>2. Select the Rectangle, Menu: Effect > Distort & Transform > Zig Zag, set the following figure. <br/> 3. Menu: Effect > Stylize > Drop Shadow, set the following figure. <br/> 1. Open illustrator, create a new file, draw a rectangle, larger than the picture you want to import, white fill. <br/>2. Select the Rectangle, Menu: Effect > Distort & Transform > Zig Zag, set the following figure. <br/> 3. Menu: Effect > Stylize > Drop Shadow, set the following figure. </p><address style= "Text-align:center; padding:. 5em; Clear:left; " >design by <a href= "//www.forest53.com" >Forestgan</a> This demo adopts <ahref= "//www.creativecommons.cn/" > Authoring Share 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.forest53.com/stat/mystat.asp?siteid=1 "type=" Text/javascript "></script><noscript><p> Stat.</p></noscript></body></ptml>
