都是IE8＋的
<!DOCTYPE html>
<html>
<head>
<title>基于窗口垂直居中 by 司徒正美</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
body{
background-image:url(about:blank); /* for IE6 */
}
.fixed{
position: fixed;
left: 50%;
top:50%;
height: 0;/* 不占据位置 */
background-color: red;
}
.relative{
position: relative;
left: -50%;/*处理水平方向 */
/*处理垂直方向*/
-webkit-transform: translateY(-50%) translateZ(0);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%) translateZ(0);
background-color: pink;
}
.content{
padding:80px;
background-color: lightblue;
}
</style>
</head>
<body >
<h1<基于窗口垂直居中 by 司徒正美</h1>
<button onclick="document.getElementById('dialog').style.display = 'block'">open</button>
<div class="fixed" id="dialog">
<div class="relative">
<div class="content">
<button style='position: absolute;right:0;top:0' type='button' onclick="document.getElementById('dialog').style.display = 'none'">close</button>
XXXXXXXXXXXXXXXXX
</div>
</div>
</div>
</body>
</html>
运行代码
<!DOCTYPE html>
<html>
<head>
<title>基于窗口垂直居中 by 司徒正美</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
body{
background-image:url(about:blank); /* for IE6 */
}
.fixed{
position: fixed;
left: -100%;
right:100%;
top:0;
bottom: 0;
background-color: #CCC;
text-align: center;
font-size: 0;
}
.fixed:after {
content:"";
display: inline-block;
vertical-align: middle;
height: 100%;
width: 0;
}
.content{
display: inline-block;
*display: inline;
*zoom:1;
vertical-align: middle;
text-align: left;
position: relative;
right: -100%;
font-size: 16px;
background-color: lightgreen;
width：150px;
height: 150px;
}
</style>
</head>
<body >
<button onclick="document.getElementById('dialog').style.display = 'block'">open</button>
<h1>基于窗口垂直居中 2 by 司徒正美</h1>
<div class="fixed" id="dialog">
<div class="content">
<button style='position: absolute;right:0;top:0' type='button' onclick="document.getElementById('dialog').style.display = 'none'">close</button>
XXXXXXXXXXXXXXXXX
</div>
</div>
</body>
</html>
运行代码
相关链接：CSS未知高度垂直居中