来源:http://www.jb51.net/article/30109.htm
<!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" /> <style> body,div{padding:0px;margin:0px;} #gd{width:100px;height:100px;background:#F00;color:#FFF;} </style> <script> window.onload = function() { var isIE=!!window.ActiveXObject; var isIE6=isIE&&!window.XMLHttpRequest; /* 这两句是判断浏览器。这是Aajx里的方法。也很好理解。我在这里就不多说了。大家有兴趣的可以去网上找找了解一下判断各种浏览器。 * */ var t = (document.documentElement.clientHeight - document.getElementById("gd").offsetHeight)/2 + document.documentElement.scrollTop; var l = (document.documentElement.clientWidth - document.getElementById("gd").offsetWidth)/2 + document.documentElement.scrollLeft; /* document.documentElement.clientHeight这个是获取当前浏览器窗口的高度。 document.getElementById("gd").offsetHeight这是获取我们dom元素的实际高度。 document.documentElement.scrollTop这是获取滚动条滚动的高度。 * */ /* 距离清楚了的话。现在我们只需要做最后一件事了。就是让滚动条滚动的时候。即时的把这个滚动的高度给加进去。 然后把即时的这个t和l值设置到dom的top和left属性中去。这样就能给用户造成个假象。以为这个是固定在那里的。 * */ if(isIE6) { setInterval(function() { t = (document.documentElement.clientHeight - document.getElementById("gd").offsetHeight)/2 + document.documentElement.scrollTop; l = (document.documentElement.clientWidth - document.getElementById("gd").offsetWidth)/2 + document.documentElement.scrollLeft; document.getElementById("gd").style.position = "absolute"; document.getElementById("gd").style.top = t + "px"; document.getElementById("gd").style.left = l + "px"; },1) } else { setInterval(function() { t = (document.documentElement.clientHeight - document.getElementById("gd").offsetHeight)/2 + document.documentElement.scrollTop; l = (document.documentElement.clientWidth - document.getElementById("gd").offsetWidth)/2 + document.documentElement.scrollLeft; document.getElementById("gd").style.position = "fixed" document.getElementById("gd").style.top = t + "px"; document.getElementById("gd").style.left = l + "px"; },1) } /* 这段就是这个作用。if(isIE6)就是当isIE6这个为真时。也就是当是IE6的浏览器的时候。 setInterval(...,1)这个是设置个时钟让在IE6的浏览器下每隔1微秒执行一下语句。 也就是不断的在更新t和l的值。然后不断的付给DOM元素的top和left属性，1微秒非常快。 用户拉滚动条的速度不可能只需要1微秒的时间。所以用户也就不可能看出来什么。 以为那个就是固定在那里的。当然你也可以设置一个滚动事件windon.onscroll。也可以 。但是我觉得没这种好。大家有兴趣的也可以研究一下（大家别闲我啰嗦，我觉得自己多研究一下东西，比我教大家一大堆东西都有用）。 当然如果不是IE6的浏览器都支持fixed属性。就执行这些语句了。 document.getElementById("gd").style.position = "fixed"//给dom元素加一个fixed属性 document.getElementById("gd").style.top = t + "px";//初始化时给dom元素设置一个居中的t值。 document.getElementById("gd").style.left = l + "px";//初始化时给dom元素设置一个居中的l值 * */ } </script> <title>固定居中</title> </head> <body> <div id="gd"> 我就在中间随便你们怎么改变窗口大小和高度 </div> <div style="height:1200px;"></div> </body> </html>