话说绝对居中
2005年12月11日 | 作者: 牧天 | 分类: CSS什么叫绝对居中？就是说容器到屏幕左右上下四个方向都有间距，并且随屏幕大小缩放相对不变或者等比例调整，始终居屏幕中间。
绝对居中也有两种情况，容器的绝对大小和相对大小。
同时有很多方法可以实现，总结起来大致如下：
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.0环境下实现。（标准）
注意height:100%是关键：
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;}
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<br />(That's the English spelling of 'centre' by the way.)<br />Resize the window and the text will reposition itself.<br />The text will not go off the left/top of the screen.<br />A vertical scroll bar will be added as necessary.</span>
这应该算是IE的一个bug，个人对display:inline-block理解有限。edge可以看作一个填充，container现在是一个上下居中的对象，加了背景色能看的更清楚，当然你也可以在container内添加任何绝对或者相对大小容器。但问题在于span只是一个内联元素，在内部添加块级元素是不标准的逻辑。
4，CSS行为expression控制实现，不过expression只支持IE，并且耗资源严重，尤其在大量使用的时候。（标准）
实时获取屏幕高宽值，分别减去容器高宽值再除以2，得到准确坐标绝对定位：
<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实现。（不在此讨论）
Referrence:
http://www.cssplay.co.uk/ie/valign.html
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;}
技术提示
容器大小固定，推荐使用的是第2种方法，兼容最好。
容器大小相对，第7，8两种方法效果在各自支持浏览器内效果是一样的，可以通过过滤语法实现单独在IE或FF内支持。
Referrence
vertical align http://www.cssplay.co.uk/ie/exampletwo.html
Horizontal and vertical centering with CSS http://www.456bereastreet.com/lab/centered/both/
( 转自: 一叶千鸟 )