What do you mean, absolutely centered? 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!
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 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:
<div style= "background: #f00; width:740px; height:340px; left:50%; margin:-170px 0 0-370px; Position:absolute; top:50%; " >
</div>
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.
<! 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 only-->
<span id= "Edge" ></span><span id= "container" >
<div style= "width:200px; height:50px; Background: #f00; line-height:50px; " > Only in IE6.0 environment </div>
</span>
</body>
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:
<! 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 ((BODY.CLIENTWIDTH-50)/2); Top:expression ((BODY.CLIENTHEIGHT-50)/2); width:50px;; height:50px; " ></div>
</body>
5.ff1.5 test through, absolute positioning, margin is proportional, at this time the container width always for the 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 Passed </div>
6.ff1.5 test through, absolute positioning, direct positioning up and down, mandatory edge bureau to achieve the relative size of the container (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}/* for explorer only*/
#middle [id] {display:table-cell; vertical-align:middle; position:static;}
#inner {position:relative top: -50%;width:600px;margin:0 auto;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>
<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, 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. <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.webjx.com" >Webjx</a> This demo uses <a href= "//www.creativecommons.cn/" > Authoring Shared Authorization < /a>--signed 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. Use of expression (ie only)
<div style= "Background:blue;position:absolute;left:expression ((BODY.CLIENTWIDTH-50)/2); Top:expression ( BODY.CLIENTHEIGHT-50)/2); width:50;height:50 "></div>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
