Question

我有这段代码......

<style type="text/css">
#container {
  width: 200px;
  height: 200px;
  background-color: #567;
}
</style>

<div id="container">
  My center div...
</div>


<script type="text/javascript">
$(window).resize(function(){
  $('#container').css({
    position:'absolute',
    left: ($(window).width() - $('#container').outerWidth())/2,
    top: ($(window).height() - $('#container').outerHeight())/2
  });
});

// To initially run the function:
$(window).resize();
</script>

这很有效，除非我滚动到页面底部，它不会根据我在页面位置的新坐标将DIV置于浏览器屏幕中间。所以我的问题是，如果我点击打开这个DIV，如果我滚动到一个长页的底部，我该怎么做才能使DIV居中？

Answer 1

您的脚本将仅位于页面顶部的窗口中。顶部是相对于文档而不是窗口 - 尝试位置：固定，然后您的居中脚本应该工作。

Answer 2

也许是这样的：jsFiddle Demo Here

我添加了动画功能，以便在滚动窗口时移动#container：

var $scrollingDiv = $("#container");
 $(window).scroll(function(){  
     $scrollingDiv.stop().animate({"marginTop": ($(window).scrollTop() + 0) + "px"}, 500, 'easeInOutSine' );            
 });

Answer 3

我不确定你的问题，但我做类似的事情

var top= $(document).scrollTop()+($(window).height()/2) - ($('#container').outerWidth()/2);
var left=(window.innerWidth/2) - ($('#container').outerWidth()/2);

Answer 4

水平中心的最佳方式是提供margin: 0 auto CSS。至于垂直居中，你目前的方式已经足够了。

Jquery浏览器调整中心Div甚至滚动

4 个答案: