CSS设置DIV垂直居中的N种方法兼容IE浏览器

发布时间：2020-03-17 14:47:55 所属栏目：系统来源：站长网

导读：副标题#e# 在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有v

下面这段代码经过实测，可以完美兼容IE7以上的IE浏览器，其它标准浏览器如火狐、谷歌等也没有问题。

说明：尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题（在一个DIV标签里有未知高度的文本或图片的情况下）。标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE(display: table;) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。

XML/HTML Code复制内容到剪贴板

<!doctype html>

<html>

<head>

　　<title>水平垂直居中</title>

　　　　body {padding: 0; margin: 0;}

　　　　body,html{height: 100%;}

　　　　#outer {height: 100%; overflow: hidden; position: relative;width: 100%;}

　　　　#outer[id] {display: table; position: static;}

　　　　#middle {position: absolute; top: 50%;} /* for explorer only*/

　　　　#middle[id] {display: table-cell; vertical-align: middle; position: static;}

　　　　#inner {position: relative; top: -50%;margin: 0 auto;} /* for explorer only */

　　　　div.greenBorder {width:500px;height:584px;background:#333;}

　　　　*+html #outer[id]{position: relative;}

　　　　*+html #middle[id]{position: absolute; }

　　</style>

</head>

<body>

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

10/13

首页

尾页

重装系统win7的详细步	如何设定win7一键还原
小编教你台式机重装系	怎样重装电脑系统教程

CSS设置DIV垂直居中的N种方法 兼容IE浏览器

CSS设置DIV垂直居中的N种方法兼容IE浏览器