页面垂直左右居中 纯css
<?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%; margin:0 auto;}
#outer { height:100%; overflow:visible; position:relative; margin:0 auto; }
_#outer, *:#outer { display:table; position:static; }
#middle { position:absolute; top:50%; left:50%; }
_#middle, *:#middle { display:table-cell; vertical-align:middle; position:static; }
#inner { position:relative; top:-50%; left:-50%;}
_#inner, *:#inner { 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>
实例演示：
源码演示
<?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%; margin:0 auto;} #outer { height:100%; overflow:visible; position:relative; margin:0 auto; } _#outer, *:#outer { display:table; position:static; } #middle { position:absolute; top:50%; left:50%; } _#middle, *:#middle { display:table-cell; vertical-align:middle; position:static; } #inner { position:relative; top:-50%; left:-50%;} _#inner, *:#inner { 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>
浙公网安备 33010602011771号