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

1.利用table特性,在width and height all set 100%的时候,可以把容器嵌套在td内形成绝对居中,此时的被嵌套容器可为绝对或者相对大小。(非标准)



[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

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



[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

3.老外给出的另类方法,巧妙利用display:inline-block;,IE6.0测试通过。(标准)
注意1.height:100%是关键:2.edge与container没有嵌套关系:
这应该算是IE的一个bug,个人对display:inline-block理解有限。edge可以看作一个填充,container现在是一个上下居中的对象,加了背景色能看的更清楚,当然你也可以在container内添加任何绝对或者相对大小容器。但问题在于span只是一个内联元素,在内部添加块级元素是不标准的逻辑。



[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

4.CSS行为expression控制实现,不过expression为IE独有,并且耗资源严重,尤其在大量使用的时候。(标准)
注意关键定义,不要以为height:100%在IE内是没用的:
实时获取屏幕高宽值,分别减去容器高宽值再除以2,得到准确坐标绝对定位:



[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

5.FF1.5测试通过,绝对定位,边距为比例,此时容器高宽始终为viewport的50%相对大小(标准):



[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

6.FF1.5测试通过,绝对定位,直接定位上下左右,强制边局实现容器相对大小(标准):



[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

7.IE6.0测试通过,强制html的padding,实现container的相对大小(标准):



[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

8.



[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

技术提示

容器大小固定,推荐使用的是第2种方法,兼容最好。

容器大小相对,第7,8两种方法效果在各自支持浏览器内效果是一样的,可以通过过滤语法实现单独在IE或FF内支持。


评论

该日志第一篇评论

发表评论

评论也有版权!