DIV上下左右都居中--经测试兼容IE,FF,Opera,Google Chrome

原创

282030166 2022-12-16 21:24:49 博主文章分类：CSS ©著作权

©著作权归作者所有：来自51CTO博客作者282030166的原创作品，请联系作者获取转载授权，否则将追究法律责任

1、全CSS控制，层漂浮（适用于做登陆页面）

<!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="gb2312" >
<head>
<title>居中Demo</title>
</head>

<mce:style type="text/css" title="currentStyle" media="screen"><!--
#divcenter{
   position:absolute;/*层漂浮*/
   top:50%;
   left:50%;
   width:300px;
   height:300px;
   margin-top:-150px;/*注意这里必须是DIV高度的一半*/
   margin-left:-150px;/*这里是DIV宽度的一半*/
   background:yellow;
   border:1px solid red;
}
--></mce:style><style type="text/css" title="currentStyle" media="screen" mce_bogus="1">#divcenter{
   position:absolute;/*层漂浮*/
   top:50%;
   left:50%;
   width:300px;
   height:300px;
   margin-top:-150px;/*注意这里必须是DIV高度的一半*/
   margin-left:-150px;/*这里是DIV宽度的一半*/
   background:yellow;
   border:1px solid red;
}</style>
</head>
<body>
<div id="divcenter">
this is a test
</div>
</body>
</html>

2、JS + CSS控制，不漂浮（适用于做登陆页面）

<html>
<head>
    <title>DIV居中演示</title>
<mce:script type="text/javascript"><!--
 function cen(){
  var divname = document.all("testdiv");
//居中高度等于页面内容高度减去DIV的高度 除以2
var topvalue = (document.body.clientHeight - divname.clientHeight)/2;
divname.style.marginTop = topvalue;
}
//页面大小发生变化时触发
window.onresize = cen;
// --></mce:script>
</head>

<body style="height:100%; width:100%; text-align:center;" οnlοad=cen()>
<div id = "testdiv" name="testdiv" style="margin:0 auto; border:1px solid red; height:400px; width:400px;">
DIV居中演示
</body>

</html>