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

发布时间：2020-03-17 09:47 所属栏目：52 来源：站长网

导读：下面这段代码经过实测，可以完美兼容IE7以上的IE浏览器，其它标准浏览器如火狐、谷歌等也没有问题。说明：尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题（在一个DIV标签里有未知高度

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

（编辑：ASP站长网）

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

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