为什么我的div无法居中？

代码在下边。
我希望点击“移动”按钮后，div会居中。
我只实现了左右居中，上下居中就实现不了了（主要是兼容问题搞的…）
并且虽然实现了左右居中，但是第一次点击那个按钮后，并不是居中。只有第二次点击后才会居中。不知道是为什么…
希望大家能帮帮忙，谢谢啦。只需要兼容ie6,7.ff就可以了<!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 runat="server">
 <title></title>
 <script src="/Jscript/jquery.min-1.3.2.js" type="text/javascript"></script>
 <script type="text/javascript">
 function yidong(obj) { var middleDiv = document.getElementById("divYiDong");
 var divHeight = middleDiv.offsetHeight;
 var bodyHeight = document.body.offsetHeight;
 middleDiv.style.top = document.documentElement.scrollTop + "px";
 middleDiv.style.left = (document.documentElement.offsetWidth - parseInt(middleDiv.offsetWidth)) / 2 + "px";
 middleDiv.style.display = "";

 }
 </script>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 <input type="button" name="btnYiDong" value="移动" onclick="yidong(this)" />
 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 <input type="button" name="btnYiDong" value="移动" onclick="yidong(this)" />
 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 <input type="button" name="btnYiDong" value="移动" onclick="yidong(this)" />
 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 <%--<div id="divYiDong" style="display:none; width:800px;margin:0 auto;border:1px solid red;position:absolute;top:50%;left:50%;margin-left:-400px; background-color:Yellow;">--%>
 <div id="divYiDong" style="display:none; width:400px; margin:0 auto;border:1px solid red;position:absolute; background-color:Yellow;"> 背景颜色是黄色的 
 背景颜色是黄色的 
 背景颜色是黄色的 
 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 
 </div>
 </div>
 </form>
</body>
</html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!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 runat="server">
 <title></title>
 <script src="/Jscript/jquery.min-1.3.2.js" type="text/javascript"></script>
 <script type="text/javascript">
 function yidong(obj) { var middleDiv = document.getElementById("divYiDong");
 var divHeight = middleDiv.offsetHeight;
 var bodyHeight = document.body.offsetHeight;
 middleDiv.style.top = document.documentElement.scrollTop + "px";
 middleDiv.style.left = (document.documentElement.offsetWidth - parseInt(middleDiv.offsetWidth)) / 2 + "px";
 middleDiv.style.display = "inline";
 }
 </script>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 <input type="button" name="btnYiDong" value="移动" onclick="yidong(this)" />
 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 <input type="button" name="btnYiDong" value="移动" onclick="yidong(this)" />
 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 <input type="button" name="btnYiDong" value="移动" onclick="yidong(this)" />
 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 1 
 <%--<div id="divYiDong" style="display:none; width:800px;margin:0 auto;border:1px solid red;position:absolute;top:50%;left:50%;margin-left:-400px; background-color:Yellow;">--%>
 <div id="divYiDong" style="width:400px; margin:0 auto;border:1px solid red;position:absolute; background-color:Yellow;"> 背景颜色是黄色的 
 背景颜色是黄色的 
 背景颜色是黄色的 
 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 背景颜色是黄色的 
 </div>
 </div>
 </form>
</body>
</html>
把js代码替换成这个，即可上下居中啦<script type="text/javascript">
 function yidong(obj) { var middleDiv = document.getElementById("divYiDong"); /*要操作的Div*/ middleDiv.style.top = document.documentElement.scrollTop + (document.documentElement.clientHeight) / 4 + "px"; /*document.documentElement.clientHeight 这个是当前屏的高度*/
 middleDiv.style.left = (document.documentElement.offsetWidth - parseInt(middleDiv.style.width)) / 2 + "px"; /*document.documentElement.offsetWidth 这个是当前屏的宽度*/
 middleDiv.style.display = "";
 }
 </script>
我改的只是对IE6有用，因为IE6有个bug，http://liuyu405.javaeye.com/blog/478269
但是你的又有点不符合，但是照着改了又是成功的。
还有，我这里没有判断浏览器，这段代码放在FF里面肯定有问题，你加个判断就好了。
我下边的js代码，在ff下测试通过了