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
投稿猜你喜欢
- 对于值传递和引用传递，书本上的解释比较繁琐，而php面试中总会出现，下面我会通过一个生活的例子带大家理解它们之间区别。第一步假设我们去酒店订
- numpy随机打乱数据方法np.random.shuffleimport numpy as np#实验可得每次shuffle后数据都被打乱，
前言深度学习框架在市面上有很多。比如Theano、Caffe、CNTK、MXnet 、Tensorflow等。今天讲解的就是主角Tensor- 一. 视图集与路由的使用使用视图集ViewSet，可以将一系列逻辑相关的动作放到一个类中：list() 提供一组数据retrieve() 提
- set global log_bin_trust_function_creators = 1; DROP FUNCTION IF EXIST
- 本文实例讲述了python通过加号运算符操作列表的方法。分享给大家供大家参考。具体如下：li = ['a', 'b&
- vue项目运行或打包,频繁内存溢出Vue项目运行或打包时，频繁内存溢出情况CALL_AND_RETRY_LAST Allocation fa
- 信息交换用汉字编码字符集-基本集 汉字标准交换码共分两级。第一级为常用字，有3755字，按汉语拼音字母顺序排列，第二级为次常用字，有3008
- 1. ndarray的属性数组的属性反映了数组本身固有的信息。常用的查看数组属性的相关语法如下表格所示：属性名称属性解释ndarray.sh
- 注: sql server 2005 及以上支持. 版本估计是不支持(工作环境2005,2008).工作需要, 需要向SQL Server
- 尽管现代浏览器已经支持了众多的CSS3属性，但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性，如border-radius、b
- 最近在研究WEB布局，遇到<H1>标签了，<H1>标签很重要。在一般教程中都这么说，<H1>标签在同一页
- 这些问题可能导致数据值的改变。一般而言，上述问题可能在你使用非二进制串数据类型（如char，varchar，text等数据类型）的情况下发生
- 现有两个元组(('a'),('b')),(('c'),('d'))，请使用p
- 问题你想根据一组语法规则解析文本并执行命令，或者构造一个代表输入的抽象语法树。 如果语法非常简单，你可以不去使用一些框架，而是自己写这个解析
- 配置说明Linux系统：CentOS-7.0MySQL版本：5.7.21Linux系统下启动多个MySQL实例，目前知道有两种方法，一种是通
- Socket服务器是网络服务中常用的服务器。使用go语言实现这个业务场景是很容易的。这样的网络通讯，需要一个服务端和至少一个客户端。我们计划
- 微信小程序中的下拉刷新,上拉加载的功能很常见,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自
- 前言本博客重点：folium的使用功能，图层控制、指北针、folium添加js和css、经纬网格线（栅格线）在上一篇使用folium制作地图
- 在前端开发中，拖拽排序是一种提升用户体验非常好的方式，常见的场景有单列表拖拽排序，多列表拖拽交换排序，比如以下这种效果： 下面将以
