javascript - 根据事件屏幕居中 DIV - jQuery

Question

我正在使用此代码将 myDiv 置于事件屏幕的中心。 (取自Using jQuery to center a DIV on the screen)

---

$("#myDiv").css("position","absolute");
$("#myDiv").css("top", Math.max(0, (($(window).height() - $("#myDiv").outerHeight()) / 2) + $(window).scrollTop()) + "px");
$("#myDiv").css("left", Math.max(0, (($(window).width() - $("#myDiv").outerWidth()) / 2) + $(window).scrollLeft()) + "px");

---

如果页面在浏览器窗口中加载并正确地将 myDiv 居中到事件屏幕(忽略页面的长度，无论我有很多向下或向上滚动)，代码工作完美。

但是，当页面在 iframe 中加载时，代码无法按预期工作，而是根据内容的完整长度(而非事件屏幕)将 DIV(垂直)居中。因此，如果我在屏幕顶部并且页面长度为 3000px，那么代码将在 1500px 处显示 myDiv，就像在浏览器窗口中加载页面一样，myDiv 将根据当前事件屏幕显示/滚动位置。

我想根据当前事件屏幕/滚动条将 div 居中。无论页面是在浏览器窗口中加载还是在 iframe 中加载。 有帮助吗？

提前致谢

Answer 1

试试这个纯 CSS 解决方案:

#myDiv {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%; -50%);
}

此代码将 #myDiv 的左上角移动到视口(viewport) X 轴和 Y 轴的 50%。使用具有负值的 translate，将 #myDiv 向后移动其自身宽度的 50% 以及 X 轴和 Y 轴。

旧版浏览器不支持 CSS3 变换，请记住这一点。