关于容器的绝对居中(网页居中)
作者:一叶千鸟
原文出处:www.51js.com
绝对居中有很多方法，总结起来大致如下：
1，利用table特性，在width and height all set 100%的时候，可以把容器嵌套在td内形成绝对居中，此时的被嵌套容器可为绝对大小或者比例大小。（非标准）
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" text="lime">
<table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#000000">
<tr>
<td align="center" >
<table width="200" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#ef1122">
<tr>
<td><center>绝对居中</td>
</tr>
</table>
</td>
</tr>
</table>
2，利用负边距方法，绝对定位使容器相对屏幕绝对居中，此时的被嵌套容器只能为绝对大小。（标准）
根据margin负值和top left的比例控制，实现随屏幕绝对居中，容器大小改变需要重新调整margin top left的参数：
<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环境。
注意height:100%是关键：
<style type="text/css">
body { margin:0; height:100%; background:#ddc;}
#edge { width:0; height:100%; display:inline-block; vertical-align:middle;}
#container { text-align:center; width:100%; display:inline-block; vertical-align:middle;}
</style>
edge与container没有嵌套关系：
<!-- required for xhtml1.1 validation only -->
<span id="edge"></span>
<span id="container">This text should be in the centre of your screen(That's the English spelling of 'centre' by the way.)Resize the window and the text will reposition itself.The text will not go off the left/top of the screen.A vertical scroll bar will be added as necessary.</span>
例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<style type="text/css">
body { margin:0; height:100%; background:#ddc;}
#edge { width:0; height:100%; display:inline-block; vertical-align:middle;}
#container { text-align:center; width:100%; display:inline-block; vertical-align:middle; background:#ccc;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<!-- required for xhtml1.1 validation only -->
<span id="edge"></span>
<span id="container">This text should be in the centre of your screen(That's the English spelling of 'centre' by the way.)Resize the window and the text will reposition itself.The text will not go off the left/top of the screen.A vertical scroll bar will be added as necessary.</span>
</body>
</html>
这应该算是IE的一个bug，个人对display:inline-block理解有限。edge可以看作一个填充，container现在是一个上下居中的对象，加了背景色能看的更清楚，当然你也可以在container内添加任何绝对大小或者比例大小容器。但问题在于span只是一个内联元素，在内部添加块级元素是不标准的逻辑。
4，CSS行为expression控制实现，不过expression只支持IE，并且耗资源严重，尤其在大量使用的时候。
<div style="background:#f00; position:absolute; left:expression((body.clientWidth-50)/2);
top:expression((body.clientHeight-50)/2);width:50px;;height:50px;"></div>
5，DOM实现。（不在此讨论）
6，FF1.5环境下实现，绝对定位，边距为比例，此时容器高宽始终为viewport的50%相对大小（标准）：
<div style="position:absolute; top:0; right:0; bottom:0; left:0; width:50%; height:50%; margin:auto; background:#666; color:white;">bleh</div>
7，FF1.5环境下实现，绝对定位，直接定位上下左右，强制边局实现容器相对大小（标准）：
<div style="position:absolute; top:100px; right:100px; bottom:100px; left:100px; background:#666; color:white;">bleh</div>
8，IE6.0环境下实现，强制html的padding，实现container的相对大小（标准）：
html { margin:0; padding:100px; height:100%;}
body { height:100%; margin:0; padding:0;}
#container { height:100%; background:#666; color:white;}
