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

发布时间：2020-03-17 07:30:10 所属栏目：系统来源：互联网

导读：这篇文章主要为大家详细介绍了兼容IE浏览器CSS设置DIV垂直居中的N种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

<pre>现在我们要使这段文字垂直居中显示！

　　　　　　　　　　div#wrap {

　　　　　　　　　　　　border:1px solid #FF0099;

　　　　　　　　　　　　background-color:#FFCCFF;

　　　　　　　　　　　　width:760px;

　　　　　　　　　　　　height:500px;

　　　　　　　　　　　　position:relative;

　　　　　　　　　　}

　　　　　　　　　　div#subwrap {

　　　　　　　　　　　　position:absolute;

　　　　　　　　　　　　border:1px solid #000;

　　　　　　　　　　　　top:50%;

　　　　　　　　　　}

　　　　　　　　　　div#content {

　　　　　　　　　　　　border:1px solid #000;

　　　　　　　　　　　　position:relative;

　　　　　　　　　　　　top:-50%;

　　　　　　　　　　}<br>　　　　　　　　</pre>

　　　　　　</div>

</body>

</html>

PS:垂直居中vertical-align的值是middle，而水平居中align的值是center，虽然同是居中但关键字不同。

六、实测可以完美实现各种浏览器兼容的居中方案　

下面这段代码经过实测，可以完美兼容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>

（编辑：焦作站长网）

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

6/7

首页

尾页

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

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