問題 什麼叫絕對置中？就是說容器到螢幕左右上下四個方向都有間距，並且隨螢幕大小縮放相對不變或者等比例調整，始終居螢幕中間。 絕對置中也有兩種情況，容器的絕對大小和相對大小。 同時有很多方法可以實現，總結起來大致如下：
1.利用table特性，在width and height all set 100%的時候，可以把容器嵌套在td內形成絕對置中，此時的被嵌套容器可為絕對或者相對大小。（非標準）注意不能加聲明！
HTML代碼<table width="100%" height="100%" border="0"align="center" cellpadding="0" cellspacing="0"><tr><td style="text-align:center;"><table width="200" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#ef1122"><tr><td></td></tr></table></td></tr></table>
2.利用負邊距方法，絕對位置使容器相對螢幕絕對置中，此時的被嵌套容器只能為絕對大小。（標準）根據margin負值和top left的比例控制，實現隨螢幕絕對置中，容器大小改變需要重新調整margin top left的參數：
HTML代碼<div style="background:#f00; width:740px; height:340px; left:50%; margin:-170px 0 0 -370px; position:absolute; top:50%;"></div>
3.老外給出的另類方法，巧妙利用display:inline-block;，IE6.0測試通過。（標準）
注意1.height:100%是關鍵：2.edge與container沒有嵌套關係：
這應該算是IE的一個bug，個人對display:inline-block理解有限。edge可以看作一個填充，container現在是一個上下置中的對象，加了背景色能看的更清楚，當然你也可以在container內添加任何絕對或者相對大小容器。但問題在於span只是一個內嵌元素，在內部添加區塊層級元素是不標準的邏輯。
HTML代碼<!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>"><html xmlns="<a href="http://www.w3.org/1999/xhtml"target="_blank">http://www.w3.org/1999/xhtml</a>"><head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /><BR><title>無標題文檔</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></head><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;">僅IE6.0環境下實現</div></span></body></html>
4.CSS行為expression控制實現，不過expression為IE專屬，並且耗資源嚴重，尤其在大量使用的時候。（標準）
注意關鍵定義，不要以為height:100%在IE內是沒用的：
即時擷取螢幕高寬值，分別減去容器高寬值再除以2，得到準確座標絕對位置：
HTML代碼<!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>"><html xmlns="<a href="http://www.w3.org/1999/xhtml"target="_blank">http://www.w3.org/1999/xhtml</a>"><head><metahttp-equiv="Content-Type" content="text/html; charset=gb2312" /><title>無標題文檔</title><style type="text/css"><!--html,body { height:100%;}--></style></head><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></html>
5.FF1.5測試通過，絕對位置，邊距為比例，此時容器高寬始終為viewport的50%相對大小（標準）：
HTML代碼<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測試通過</div>
6.FF1.5測試通過，絕對位置，直接定位上下左右，強制邊局實現容器相對大小（標準）：
7.ff1.5 IE5 IE6通過測試
HTML代碼<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><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></head><body><div id="outer"> <div id="middle"> <div id="inner"class="greenBorder"> <p><ahref="javascript:toggleContent('inner',1)">預設長度</a> <ahref="javascript:toggleContent('inner',2)">加長頁面</a></p><p> 1.開啟illustrator,建立一個檔案，畫個矩形，比你要匯入的圖片大一些，白色填充。 <br />2.選中矩形，菜單：Effect > Distort & Transform > Zig Zag，設定如下圖。<br /> 3.菜單：Effect > Stylize > Drop Shadow，設定如下圖。 <br/> 1.開啟illustrator,建立一個檔案，畫個矩形，比你要匯入的圖片大一些，白色填充。 <br />2.選中矩形，菜單：Effect > Distort & Transform > Zig Zag，設定如下圖。<br /> 3.菜單：Effect > Stylize > Drop Shadow，設定如下圖。</p><address style="text-align:center; padding: .5em; clear: left;">Design by <a href="//www.forest53.com">Forestgan</a>本示範採用<ahref="//www.creativecommons.cn/">創作共用授權</a>--署名和非商業用途。</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></html>
