js控制div居中的问题，求大神指教~~急急急~~~

你的上个帖子移到js区啦,那里更多专业人士.js 问题在js 区问比较合适.以前我也喜欢在php板块问js问题,后来发现其实这么做是没必要的.哈哈

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>Div Align Center</title>
<script type="text/javascript">
window.onload = function() {
var myDiv = document.getElementById("myDiv");
myDiv.align = "center";
}
</script>
</head>
<body>
<div id="myDiv">Div Align Center....</div>
</body>
</html>

宽度
浏览器的宽度减去你的DIV的宽度，然后，除以2高度
浏览器的高度减去你的DIV的高度，然后，除以2

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
        #align{
            width: 600px;
            height: 300px;
            border: 1px solid black;
        }
        .center{
            margin: 0 auto;
        }
    </style>
</head><body>
    <div id="align"></div>
    <script>
        function addClass(elem, clz){
            var className = elem.className;
            elem.className = className === "" ? clz : (className + " " + clz);
        }
        addClass(document.getElementById('align'), "center");
    </script>
</body>
</html>记得头部加<!DOCTYPE html>或者其他能激活标准模式的，否则IE6下有问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
    <div id="" style="border:1px solid red; width:500px; height:100px;"></div>
    <script type="text/javascript">
        document.getElementById('').style.margin = "0 auto";
</script>
</body>
</html>

var scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;// 屏幕居中
  newDivW = 300;
  var newDiv = document.createElement("div");
  newDiv.id = _id;
  newDiv.style.position = "absolute";
  newDiv.style.zIndex = "19999";
  newDiv.style.width = newDivW + "px";
  newDiv.style.top = (parseInt(scrollPos + 200)) + "px";
  newDiv.style.left = (parseInt(document.body.offsetWidth) - newDivW) / 2 + "px"; // 屏幕居中
  newDiv.style.overflow = "auto";
  newDiv.style.background = "#FFF";
  newDiv.style.border = "3px solid #DDD";
  newDiv.style.padding = "10px";
  document.body.appendChild(newDiv);
产生一个新的层，高度使用了固定的位置，如果要居中，可以参考宽度

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
        #align{
            width: 600px;
            height: 300px;
            border: 1px solid black;
        }
        .center{
            margin: 0 auto;
        }
    </style>

    <script>
    var adjustDivPosition = function() {
        var docWidth = document.body.offsetWidth;
        // var docHeight = document.body.offsetHeight;

        var divobj = document.getElementById("align");
        var divWidth = divobj.offsetWidth;
        // var divHeight = divobj.offsetHeight;

         //让图片左右居中显示
         var marginleft=(docWidth-divWidth)/2;
         divobj.style.marginLeft = marginleft + "px";

         //让图片上下居中显示
         //var margintop=(docHeight-divHeight)/2;
         //divobj.style.marginTop = margintop + "px";

    };
    </script>

</head><body>
    <div id="align"></div>
    <script>
      adjustDivPosition();
    </script>
</body>
</html>
这个方法只能控制div在body左右居中，但是不能控制上下居中。
原因其实很简单：应为body的高度是不确定的。如果你不要用body，你在一个div中再放一个div，然后控制内部的div在外部的div中上下左右居中。
你把我注掉的地方放开，然后适当的变通一下就可以了。其实设计思想也就是上面三楼教给你的思想。呵呵，如果你明白了就结贴散分吧！！！！

刚才在网上找到了一个取得document高度的方法，
下面的代码可以实现上下左右居中了，代码可以运行。。工作啦<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
        #align{
            width: 600px;
            height: 300px;
            border: 1px solid black;
        }
        .center{
            margin: 0 auto;
        }
    </style>

    <script>
    var adjustDivPosition = function() {
        var docWidth = document.body.offsetWidth;

        var docHeight= (
            'innerHeight' in window? window.innerHeight :
            document.compatMode!=='BackCompat'? document.documentElement.clientHeight : document.body.clientHeight
        );        var divobj = document.getElementById("align");
        var divWidth = divobj.offsetWidth;
        var divHeight = divobj.offsetHeight;

         //让图片左右居中显示
         var marginleft=(docWidth-divWidth)/2;
         divobj.style.marginLeft = marginleft + "px";

         //让图片上下居中显示
         var margintop=(docHeight-divHeight)/2;
         divobj.style.marginTop = margintop + "px";

    };
    </script>

</head><body>
    <div id="align"></div>
    <script>
      adjustDivPosition();
    </script>
</body>
</html>

还有一个纯css的写法，这个我觉得比用javascript计算要好的多呀。原理也是和3楼说的一样
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
        #align{
            width: 600px;
            height: 300px;
            border: 1px solid black;
            margin-top:-150px;
            top:50%;
            position:absolute;
            left:50%;
            margin-left:-300px;
        }
    </style>
</head><body>
    <div id="align"></div>
</body>
</html>

调试易

js控制div居中的问题，求大神指教急急急~

解决方案 »