javascript - 如何使视口(viewport)垂直居中？

Question

我解释一下我的问题:

我创建了一个叠加层，有一个缩略图画廊，点击一张图片，它会出现在一个框中，点击图片会变大(尺寸适合窗口的宽度)。此框完全水平对齐，即使您调整窗口大小时也保持对齐。

问题是我想要盒子垂直对齐。在视口(viewport)中对齐，因为我希望它立即可见。但我不想在滚动过程中，框不随页面一起移动。 (因此排除display: fixed)

现在盒子是这样的:

#box {
 padding: 0 5px 10px;
 background-color:#a0a0a0;
 margin: 5px 5px 15px 5px;
 display:none;
 z-index:+300;
 position:absolute;
 left:50%;
 top:20%;
 border-radius: 10px;
}

点击该图像之前的 div #box 具有 display:none。 因此，视口(viewport)中的对齐只会在框出现期间进行。当他移动页面(滚动)时对齐无关紧要。

这是 jsfiddle: http://jsfiddle.net/tvafw5Ls/13/

如果可以只用 CSS3 做这个更好，但是用 js 解决也可以。

希望你能帮帮我! 非常感谢!

Answer 1

好的，这是您的 JsFiddle 更新后的视口(viewport)居中 - 我将您的这部分代码调整为如下所示:

if (widthimage < i2.width) {
        $('#box').css('left', '50%');
        $('#box').css('top', '50%');
        $('#box').css('transform', 'translate(-50%,-50%)');
        $('#box').css('-webkit-transform', 'translate(-50%,-50%)');
        $("#immagine img:last-child").css('width', '100%');
    } else {
        $('#box').css('left', '50%');
        $('#box').css('top', '50%');
        $("#immagine img:last-child").css('width', '');
        $('#box').css('transform', 'translate(-50%,-50%)');
        $('#box').css('-webkit-transform', 'translate(-50%,-50%)');
    }


    $(window).resize(function () {
        $('#box').css('left', '0%');
        $("#immagine img:last-child").css('width', '100%');
        var widthimage = $("#immagine img:last-child").width();
        if (widthimage < i2.width) {
            $('#box').css('left', '50%');
            $('#box').css('top', '50%');
            $('#box').css('transform', 'translate(-50%,-50%)');
            $('#box').css('-webkit-transform', 'translate(-50%,-50%)');
            $("#immagine img:last-child").css('width', '100%');

        } else {
            $('#box').css('left', '50%');
            $('#box').css('top', '50%');
            $("#immagine img:last-child").css('width', '');
            $('#box').css('transform', 'translate(-50%,-50%)');
            $('#box').css('-webkit-transform', 'translate(-50%,-50%)');

        }

    });

这是在做什么，是一个漂亮的 css 技巧，看起来像这样:

position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

这将使 CSS 中的任何内容垂直和水平居中。

这是 JsFiddle - https://jsfiddle.net/rockmandew/tvafw5Ls/17/

我将编辑我的答案以包括如何在滚动时使灯箱保持固定(如果我正确理解你的问题，你希望灯箱在用户滚动时保持在固定位置，但在窗口时使其居中/视口(viewport)已调整大小。)

** 我撒谎了，我当前的解决方案将使灯箱在滚动时保持在初始位置 - 如果您希望它跟随页面滚动，您可以将其添加到您的代码中:

$(window).scroll(function() {
  $( '#box' ).css('position', 'fixed');
});

** 更新 ** 我更新了我的代码，在底部包含 lorem ipsum 以提供滚动 - 测试此链接，如果“它不起作用”那么你的问题是错误的。 https://jsfiddle.net/rockmandew/tvafw5Ls/18/