本文详细解析利用JavaScript获取浏览器窗口可见区域宽高及滚动偏移量，计算并动态设置绝对定位DIV的left和top属性，实现弹窗水平垂直居中。通过监听onresize和onscroll事件，确保在窗口缩放或页面滚动时弹窗保持居中状态，附带完整示例代码。
获取窗口尺寸与滚动偏移量
首先，我们需要明确JavaScript中获取窗口和文档尺寸的几个关键属性。document.body.clientWidth表示网页可见区域的宽度，即浏览器显示内容区的宽度，不包含浏览器边框及垂直滚动条的宽度，该值随窗口大小变化而改变。document.body.clientHeight表示网页可见区域的高度，即浏览器能显示的最大高度，不包含浏览器边框及水平滚动条的高度，同样随窗口大小动态变化。document.body.scrollTop表示页面被垂直滚动条卷去的高度，即被地址栏和菜单栏遮挡的上方部分高度。document.body.scrollLeft表示页面被水平滚动条卷去的宽度，即被左侧边缘遮挡的左方部分宽度。 接下来分析实现逻辑。第一步是实现弹窗初始状态下的绝对居中，暂不考虑滚动条影响。我们需要计算弹窗距离视口左侧和顶部的距离。假设divId为需要居中的层元素，divId.clientWidth为其宽度。计算左侧距离v_left的公式为：(document.body.clientWidth - divId.clientWidth) / 2；计算顶部距离v_top的公式为：(document.body.clientHeight - divId.clientHeight) / 2。随后，将计算得到的v_left和v_top分别赋值给divId.style.left和divId.style.top，即可实现弹窗在视口中的居中显示。 第二步是解决滚动条拖动时的居中问题。当用户拖动滚动条时，只需将当前卷去的宽度和高度累加到之前计算的左边距和上边距中即可。具体操作为：v_left += document.body.scrollLeft；v_top += document.body.scrollTop。再次将更新后的v_left和v_top赋值给divId.style.left和divId.style.top，此时弹窗在滚动后仍能保持居中显示。完整代码如下：
实现弹窗初始居中逻辑
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <title>弹出的层居中显示</title> <meta name="generator" content="editplus"> <meta name="author" content=""> <meta name="keywords" content=""> <meta name="description" content=""> </head> <body> <table width=100%> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> </table> <div id=mxh style="position:absolute;left:200px;top:30px;width:200px;height:200px;background -color:navy;border:2px">我是居中显示的了。</div> </body> </html>[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
处理滚动与窗口缩放跟随
若希望在拖动滚动条或重置窗口大小时，弹窗依然保持居中，可以在body标签中添加onresize="divcenter();"和onscroll="divcenter();"事件监听。这样即可实现动态居中，但需注意，这种实时计算的方式在拖动滚动条时可能会出现轻微的抖动效果，体验上可能不够平滑。