javascript - 如何让div保持在视口(viewport)的中心

Question

我正在为我的一个项目创建一个反馈系统。我的目标设备是 iPad。基本上发生的事情是通过 ajax 调用页面的 div 并且它应该覆盖下面的内容。我有那部分工作。

我想要做的是将 div 锁定在视口(viewport)的中间。我已经在我的元素上尝试了 position:fixed ，该元素有效，但它会锁定到错误的位置。它似乎将自身居中于视口(viewport)的初始位置。如果我向下滚动到较长页面的底部并调用我的反馈窗口，它仍将位于顶部附近。

Ajax 页面(调用页面时运行)

$(document).ready(function(){
  $(".popup").css({
    top: "50%",
    left: "50%",
    marginLeft: -$(".popup").width() / 2,
    marginTop: -$(".popup").height() / 2
  });
});

如果我能找到视口(viewport)的顶部，我想我就能让它正常工作。

我调查过:http://www.appelsiini.net/projects/viewport但这并不能真正解决我的问题。

任何正确方向的帮助、建议或指示将不胜感激!谢谢!

Answer 1

固定定位是相对于窗口的左上角应用的，无论您向下滚动多远(我认为这就是您想要的)。

所以:

.popup {
   position:fixed;
   top:20px;
   left:40px;
   right:40px;
}

首先，将弹出窗口放在距地址栏 20px 的位置(也就是说，即使您滚动到底部)。

接下来，设置 left 和 right 将从窗口两侧“拉伸(stretch)”固定元素以开始和结束 40px(或您指定的任何值)。这是使弹出 div 居中的便捷方法。

如果您的弹出窗口需要固定大小 - 不根据窗口宽度拉伸(stretch) - 您可以将左侧和右侧都设置(可能为零)，然后在该 div 内，使用另一个带有 margin 的 div :0 auto，这会将内部 div 置于固定的外部 div 的中心。

附注 正如您可以同时设置left和right一样，您也可以同时设置top和bottom，这将有相应的结果。但是，如果您需要固定高度，则无法使用 margin:auto 技巧将其垂直居中。