以大型网站为中心的视口

Question

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

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

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

垂直方向上，50% 有效，但水平方向上 50% 则需要进入页面 2000 像素。

有谁知道有什么有用的吗？

---

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

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

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

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

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

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

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

谢谢

Answer 1

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

看看这篇文章，其中他们解释了如何使居中基于窗口区域显示的对象。

使用 jQuery 将 DIV 在屏幕上居中

Answer 2

您可以使用负左边距与设置位置：相对;

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

Answer 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>