没问题，我来帮你搞定这个弹窗居中的需求！你的核心问题是之前的代码基于整个页面（文档）的尺寸计算位置，而不是当前用户可见的视口，而且没有用正确的定位方式来固定弹窗在视口中。

关键原理：用fixed定位 #

要让弹窗始终停在当前视口的中心，不管页面滚动到哪里，首先要给弹窗设置position: fixed——这个定位方式是相对于浏览器视口的，不会随页面滚动移动，完美符合你的需求。

方案1：CSS为主，JS仅负责显示（推荐） #

这种方式最简洁，不需要JS计算宽高，CSS就能自动处理居中：

首先给弹窗写基础CSS：

.hidden-div {
  position: fixed;
  display: none; /* 默认隐藏 */
  left: 50%;
  top: 50%;
  /* 通过translate把元素拉回自身的一半，实现完美居中 */
  transform: translate(-50%, -50%);
  /* 加上你的其他样式，比如背景、宽高、边框等 */
  width: 300px;
  height: 200px;
  background: white;
  border: 1px solid #ccc;
}

然后点击按钮时，只需要用JS显示它就行：

// 假设按钮的id是showBtn，弹窗的id是modal
$('#showBtn').click(function() {
  $('#modal').show();
});

这个方法的好处是：不管视口大小怎么变（比如用户缩放窗口、手机旋转），弹窗都会自动保持居中，不需要额外的JS计算，性能更好。

方案2：纯JS计算位置（适配你原有的函数逻辑） #

如果你更倾向于用JS来控制位置，可以修改你的函数，改成基于视口的尺寸计算，同时确保弹窗是fixed定位：

首先确保弹窗的CSS有position: fixed：

.hidden-div {
  position: fixed;
  display: none;
  /* 其他样式 */
}

然后修改你的JS函数：

function setToViewportCenter(element) {
  // 获取当前视口的宽高（不是整个页面的）
  const viewportWidth = $(window).width();
  const viewportHeight = $(window).height();
  // 获取元素自身的宽高
  const elementWidth = $(element).width();
  const elementHeight = $(element).height();
  
  // 计算视口中心的位置
  const leftPos = (viewportWidth - elementWidth) / 2;
  const topPos = (viewportHeight - elementHeight) / 2;
  
  // 设置元素位置并显示
  $(element).css({
    left: `${leftPos}px`,
    top: `${topPos}px`,
    display: 'block'
  });
}

// 点击按钮时调用函数
$('#showBtn').click(function() {
  setToViewportCenter('#modal');
});

为什么这个能解决你的问题？

• 用$(window).width()和$(window).height()获取的是当前视口的尺寸，不是整个文档的，所以计算出来的是视口中心。
• fixed定位让弹窗的位置相对于视口，不会随页面滚动移动，也不会触发页面滚动到页面中心。

内容的提问来源于stack exchange，提问作者Francesco Tozzi