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

ZBC_killer 2012-02-27 11:09:51

如题，麻烦知道的附上代码，谢谢

...全文

240 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

luyang1016 2012-02-28

打赏
举报

还有一个纯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>

luyang1016 2012-02-28

打赏
举报

刚才在网上找到了一个取得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>

luyang1016 2012-02-28

打赏
举报



<!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中上下左右居中。
你把我注掉的地方放开，然后适当的变通一下就可以了。

其实设计思想也就是上面三楼教给你的思想。

呵呵，如果你明白了就结贴散分吧！！！！

ZBC_killer 2012-02-28

打赏
举报

[Quote=引用 3 楼 h123hu 的回复:]
宽度
浏览器的宽度减去你的DIV的宽度，然后，除以2

高度
浏览器的高度减去你的DIV的高度，然后，除以2
[/Quote]
谁能教我这种方法？

Linux-Torvalds 2012-02-27

打赏
举报

<!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>

黄袍披身 2012-02-27

打赏
举报

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

myvicy 2012-02-27

打赏
举报

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);
产生一个新的层，高度使用了固定的位置，如果要居中，可以参考宽度

ZBC_killer 2012-02-27

打赏
举报

[Quote=引用 3 楼 h123hu 的回复:]
宽度
浏览器的宽度减去你的DIV的宽度，然后，除以2

高度
浏览器的高度减去你的DIV的高度，然后，除以2
[/Quote]
嗯！我就是想找这种方法，麻烦教我应该怎么写！哈哈，帮帮忙！兄弟
牛哥，你把帖子转到这里我一直以为是我发不了帖子,哈哈，谢谢楼上的大神们，不过我是想要3楼兄弟的这种方法！

小昭 2012-02-27

打赏
举报

以上正解了，楼主多尝试一下吧，编程这个东西，还得靠自己动手实践。

lsw645645645 2012-02-27

打赏
举报



<!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="mark" style="border:1px solid red; width:500px; height:100px;"></div>

    <script type="text/javascript">

        document.getElementById('mark').style.margin = "0 auto";

</script> 

</body>

</html>

峭沙 2012-02-27

打赏
举报

<!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下有问题