如何将div保持在视口中心

Question

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

我想要做的是将div锁定在视口的中间.我试过position:fixed我的元素,但它会锁定在错误的位置.它似乎以视口的初始位置为中心.如果我向下滚动到较长页面的底部并调用我的反馈窗口,它仍然会在顶部附近.

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

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

如果我能找到视口的顶部,我想我能够使这个工作正常.

我调查过:http://www.appelsiini.net/projects/viewport但它并没有真正解决我的问题.

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

Answer 1

固定定位相对于窗口的左上角应用,无论您滚动多远(我假设是您想要的).

所以:

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

首先,将你的弹出窗口放在地址栏上20px(意思是,即使你滚动到底部).

接下来,设置两个leftAND right将"拉伸"固定元素以从窗口的两侧开始和结束40px(或任何你给它的).这是一个以弹出式div为中心的便捷方式.

如果你的弹出窗口需要是一个固定的大小 - 不是根据窗口的宽度拉伸 - 你可以设置左右两边(可能是零)然后在这个div中,有另一个div margin:0 auto,它将居中于内部div在固定的外部div内.

PS就像你可以设置两个left和right,你也可以设置两个top和bottom,这将有相应的结果.但是,如果您需要固定高度,则无法使用该margin:auto技巧将其垂直居中.