绝对居中定位（计算滚动位置,IE & FF）

最新推荐文章于 2022-05-21 15:08:40 发布

最新推荐文章于 2022-05-21 15:08:40 发布 · 186 阅读

文章标签：

#IE

Ajax 专栏收录该内容

158 篇文章

订阅专栏

本文介绍了一种使用JavaScript和CSS实现网页元素居中的方法。通过计算页面滚动条的位置和目标元素的高度及宽度，可以精确调整元素的位置，使其在屏幕中央显示。此技巧适用于创建居中的弹窗或对话框。

  function toWinCenter(id) {
   var obj = $(id);
   var top = document.body.scrollTop + (window.innerHeight || document.body.offsetHeight) / 2 - obj.offsetHeight / 2;
   var left = (window.innerWidth || document.body.offsetWidth) / 2 - obj.offsetWidth / 2;
   obj.style["left"] = left + "px";
   obj.style["top"] = top + "px";
  }
 <div id="mbox" style="position:absolute;z-index:10;width:300px;height:200px;background:#f0f0f0;border:1px solid #c0c0c0;left:0px;top:0px;padding:10px;">TRS-bwl</div>