以大型网站为中心的视口答案

【问题标题】：Viewport centring on large website以大型网站为中心的视口
【发布时间】：2012-07-11 22:55:26
【问题描述】：

我正在尝试使用此模板构建一个目前为 16000 像素的水平网站

http://tympanus.net/Tutorials/WebsiteScrolling/

该网站有四个部分，每个部分 4000 像素宽，我正在尝试实现一个 div，该 div 将在每个部分的浏览器视口中居中。

垂直方向，50% 有效，但水平方向 50% 将是 2000px 进入页面。

有没有人知道有什么办法？

我找到了一个将我的#verycentre Div 居中在第一页上的脚本，它不是 4000px 的 50%，它位于浏览器窗口中，看起来很棒。

我现在遇到的问题是我需要在每个部分锚点处有一个居中的窗口 div。

当页面滚动并点击每个部分时，我试图为每个部分实现一个可调整大小的#verycentre Div。

我现在使用的代码贴在下面，非常适合第 1 节中的第一个居中 div。

我认为问题可能在于函数调用已进行 document.ready

当时窗口中只有一个#verycentred div，但不是 100% 确定。

如何使每个锚点处的所有#verycentred Div 居中/可调整？

谢谢

【问题讨论】：

你为什么不使用 jquery 控件而不是使用这个水平控件？
那个 div 的高度和宽度是多少？

标签： jquery css width viewport

【解决方案1】：

通过 CSS 将其居中会是一个问题，因为您的宽度会偏移窗口区域，因此您可以使用一个 JQuery 函数，该函数将帮助您根据窗口位置居中该 div

看看这篇文章，他们解释了如何根据窗口区域显示来居中对象。

Using jQuery to center a DIV on the screen

【讨论】：

我找到了它的代码，但是在每个“部分”中制作一个居中的 div 时遇到问题，只有第一页有效。我已经在下面发布了代码
您能否将您的代码提供给我们，这样才能帮助我们找到确切的问题。
您的代码正在运行，您只需要在您的部分类上添加一个相对位置，以便每个具有verycentre 的 div 都尊重他的父级，这将是容器（部分）.section{ margin:0px; bottom:0px; width:4000px; float:left; height:100%; background-color:#96F; position:relative; }

【解决方案2】：

您可以使用负左边距与 set position:relative;

div{
 position:relative;
 left: 50%;
 margin-left: -2000px;
}

【讨论】：

【解决方案3】：

<script type="text/javascript">
$(document).ready(function() {
function move_div() {
    window_width = $(window).width() ;
    window_height = $(window).height() ;    

    obj_width = $('#verycentre') .width() ;
    obj_height = $('#verycentre') .height() ;

    $('#verycentre').css('top', (window_height / 2) - (obj_height / 2)) .css('left',       (window_width /2) - obj_width / 2);
    }

    move_div() ;

$(window) .resize(function() {
move_div() ;

});

}) ;
</script>

【讨论】：