CSS实现DIV完美垂直居中（支持多浏览器）（2）
作者：ruxpinsp1 来源：蓝色理想 发布时间：2007-08-13 09:21:00
三、把容器当作表格单元
CSS 提供一系列diplay属性值，包括 display: table, display: table-row, display: table-cell 等，能把元素当作表格单元来显示。这是再加上 vertical-align: middle, 就和表格中的 valign="center" 一样了。
.middle-demo-3{
display: table-cell;
height: 300px;
vertical-align: middle;
}
可惜IE不支持这些属性，不过在其他浏览器上显示效果非常完美。
要注意的是：和一个合法的<td>元素必须在<table>里一样，display: table-cell 元素必须作为 display: table 的元素的子孙出现。
优点：
不用说了吧，就是表格，效果和表格一模一样
缺点：
IE下无效
四、以毒攻毒！用 IE 的 bug 解决 IE 中的绝对居中
先不得不说一句，IE 真的是个很烂的浏览器，CSS1中的定义都不支持，害得要我们转个大圈子来造居中。不过就像我说的，凡是 table 布局可以实现的，CSS 一定可以实现，即使在 IE 里也不例外。我研究 IE layout 模式多年，还是找出了一个可以在 IE 中绝对居中的方法。这个方法就是基于 IE layout 的 bug，也可以算以毒攻毒。至于原理，不要问我，这是独门秘学，何况三言两语也讲不清楚，只要好用就行
.middle-demo-4{
height: 300px;
position: relative;
}
.middle-demo-4 div{
position: absolute;
top: 50％;
left: 0;
}
.middle-demo-4 div div{
position: relative;
top: -50％;
left: 0;
}
五、整合三和四，写出支持所有浏览器的垂直居中容器！
思路是利用 IE 和 非IE 浏览器的 CSS hack, 整合三和四的CSS，写出兼容主流浏览器的垂直居中容器。具体代码就不给出了，大家权当作练习练习。例子可以在下面的附录中找到。
最终实测支持的浏览器：IE6+, Mozilla 1.7, Netscape Navigator 8, Opera 8.0+, Firefox 1.0+ 和 Safari 1.0+IE5 下需要加上对合适模型的补正。
推测支持的浏览器：Mozilla 1.5+, Netscape Navigator 7+, Opera 7+
未测试浏览器：Konqueror
最后附上自己写的，所有居中布局的范例网页，大家不明白可以参考。
[提示：你可先修改部分代码，再按运行]
0
投稿猜你喜欢
- 自己从工艺品设计到平面设计到网络设计，虽然设计原则不离其宗，但经验下来的心得告诉自己，设计媒介的变化带来很多媒介自身的特殊性，下面总结下网站
- 这篇论坛文章（赛迪网技术社区）详细的介绍了在MySQL中使用GRANT语句增添新用户的具体步骤，更多内容请参考下文…&
- 并行查询其优势就是可以通过多个线程来处理查询作业，从而提高查询的效率。SQL Server数据库为具有多个CPU的数据库服务器提供并行查询的
- 这里主要是讲在asp下两次由access数据库升级到sql server数据库后的经验及注意事项，其它语言也可以参考一下。欢迎讨论补充。1.
- 几个月来好像就现在暂时无需求，稍微轻松一下，然后在Q群中发现有人提问，怎么用CSS实现数学公式“四又二分之一”。对于这个公式个人
- ajax 同步请求和异步请求的差异分析，需要的朋友可以参考下。代码一：Synchronize = function(url,param) {
- 此文章主要向大家讲述的是SQL Server数据库的分布式数据库系统的实际目标，通俗的讲就是研制分布式数据库系统的目的、动机，其中主要包括的
- 使用ENUM代替字符串类型有时候， 可以通过使用ENUM来代理常规的字符串类型。一个ENUM列能够存储65535个不同的字符串值，MySQL
Balloons(气球状提示)问题摘要气球状提示（Balloon）是一个小型的弹出窗口，用于通知用户出现非关键性问题或控件处于某种特殊情况。- 大家都出书，我也很幸运的有了这本书，不过一本书的好与坏，错与对都是在于一个人的理解，web标准这个东西主要还是大家理解，理解的深
- 很久之前就对jQuery.animate的实现非常感兴趣，不过前段时间很忙，直到前几天端午假期才有时间去研究。jQuery.animate的
- ASP中RegExp是什么 '名字字符检验Public Function CheckName(Str) &nbs
- 更轻量－ 出色的颗粒化模块，子模块划分；－ 延迟加载；－ 强调代码重用（公共基类、插件、扩展）；更易用－ 统一的API；－ 便利（each,
- 目前使用MySQL的网站，多半同时使用Memcache作为键值缓存。虽然这样的架构极其流行，有众多成功的案例，但过于依赖Memcache，无
- 有什么办法可以列出数据视图吗？有，假设当前数据库为flashdays，则我们可用下列代码列出它的数据视图：pubDatabase
- 从MySQL 5.0.2开始，通过mysql_stmt_attr_set() C API函数实现了服务器端光标。服务器端光标允许在服务器端生
- 新云4.0模版标签是全新改的了，加了前缀。如果你怀旧，请查看新云CMS3.1常用模板标签。下面的标签说明，后台就有，为了方便查看转到这里。{
- XMLHttpRequest 最近在 W3C 标准之路上又迈进了一步，W3C Web API&nbs
- A 定义数组有两种方式：DIM和REDIM。DIM定义的是固定个数、数据类型的数组；而REDIM则不同，它可以定义不同类型的数据，也可以定义
- 随着对称密码的发展,DES数据加密标准算法由于密钥长度较小(56位),已经不适应当今分布式开放网络对数据加密安全性的要求，因此1997年NI
