两个页面垂直居中的范例
<style>
#test{
width:100px;
height:100px;
position:absolute;
left:50%;top:50%;
margin:-50px 0 0 -50px;
background-color:#000
}
</style>
<div id="test"></div>
<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>垂直居中</title>
<style type="text/css">
body, html { height:100%; }
#outer { height:100%; overflow:visible; position:relative; }
#outer[id] { display:table; position:static; }
#middle { position:absolute; top:50%; }
#middle[id] { display:table-cell; vertical-align:middle; position:static; }
#inner { position:relative; top:-50%; }
#inner[id] { position:static; }
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
<p>111111这个在IE中可以实现居中，在Firefox中也可以实现居中1111111</p>
</div>
</div>
</div>
</body>
</html>
扫一扫
7214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
