什么叫绝对居中？就是说容器到屏幕左右上下四个方向都有间距，并且随屏幕大小缩放相对不变或者等比例调整，始终居屏幕中间。 绝对居中也有两种情况，容器的绝对大小和相对大小。 同时有很多方法可以实现，总结起来大致如下：

1.利用table特性，在width and height all set 100%的时候，可以把容器嵌套在td内形成绝对居中，此时的被嵌套容器可为绝对或者相对大小。（非标准）注意不能加声明！
如是在标准模式下要加样式body,html{height:100%;padding:0;margin:0;}

2.利用负边距方法，绝对定位使容器相对屏幕绝对居中，此时的被嵌套容器只能为绝对大小。（标准）根据margin负值和top left的比例控制，实现随屏幕绝对居中，容器大小改变需要重新调整margin top left的参数：

3.老外给出的另类方法，巧妙利用display:inline-block;，IE6.0测试通过。（标准）

注意1.height:100%是关键：2.edge与container没有嵌套关系：

这应该算是IE的一个bug，个人对display:inline-block理解有限。edge可以看作一个填充，container现在是一个上下居中的对象，加了背景色能看的更清楚，当然你也可以在container内添加任何绝对或者相对大小容器。但问题在于span只是一个内联元素，在内部添加块级元素是不标准的逻辑。

4.CSS行为e­xpression控制实现，不过e­xpression为IE独有，并且耗资源严重，尤其在大量使用的时候。（标准）

注意关键定义，不要以为height:100%在IE内是没用的：

实时获取屏幕高宽值，分别减去容器高宽值再除以2，得到准确坐标绝对定位：
(来源www.iocblog.net)
5.FF1.5测试通过，绝对定位，边距为比例，此时容器高宽始终为viewport的50%相对大小（标准）：

Tag: 绝对居中 ,CSS

文章整理：iocblog
版权申明：本站文章均来自网络，如有侵权，请联系我们，我们收到后立即删除，谢谢！
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有。