Question

我解释了我的问题：

我创建了一个叠加层，有一个缩略图图库并点击图片，它会出现在一个框中，图像点击更大（大小适合窗口的宽度）。此框完全水平对齐，即使您调整窗口大小，对齐也会保持不变。

问题是我想要盒子的垂直对齐。在视口中对齐，因为我希望它立即可见。但我不想在滚动期间，框不会与页面一起移动。（因此不包括显示：固定）

现在框是这样的：

#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 ，显示：无。因此，视口中的对齐仅在框的外观期间。当他移动页面时（滚动）对齐并不重要。

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

如果可以这样做只用CSS3更好，但是用js解决方案也没关系。

我希望你能帮助我！非常感谢！

Answer 1

好的，这是你的JsFiddle更新了视口中心 - 我调整了你的代码部分看起来像这样：

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/

Answer 2

使用你的JS，我想出了This Fiddle

我所做的是将您的初始#box css更改为：

#box {
    width:90%;
    max-width:775px;
    padding: 0 5px 10px;
    background-color:#a0a0a0;
    margin: 5px 5px 15px 5px;
    display:none;
    z-index:+300;
    position:fixed;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
}
#box #immagine img {
    width:100%;
}

请注意我是如何将框更改为最初具有fixed位置的。然后我使用translate-negative-position将它放在窗口的死点。我还给了盒子一个宽度和最大宽度，所以你的js不需要处理它。

之后，我为你的JS做了一些事情。我删除了你用translate3d给出的框的CSS，然后我找到了固定框的初始位置，将位置改为absolute并给出了框位置的高度。

if (widthimage < i2.width) {
    //Took off the translates from here
    $('#box').css('left', '0%');
    $("#immagine img:last-child").css('width', '100%');
} else {
    //and here
    $('#box').css('left', '50%');
    $("#immagine img:last-child").css('width', '');
}

//Added this to the mix to make the box position absolute again
var imgOffsetTop = $('#box').position().top;
var boxHeight = $('#box').outerHeight();
$('#box').css({
    "position":"absolute",
    "top":(imgOffsetTop+(boxHeight/2))+"px"
});

<强>更新我已经将固定到绝对的解决方案变成了一个函数，并使其在加载和窗口大小调整时运行。我还编辑了一些CSS，使#box具有最大宽度和宽度。看看这个例子的小提琴。

Answer 3

纯CSS方式，模拟表格和单元格，在每个现代浏览器中都很好用。只是给你一个基本的想法。 http://jsfiddle.net/q8bevnL2/

<style>
#box{
    position:fixed;
    width:100%;
    height:100%;
    background:black;
    color:white;
    text-align:center;
    display:table;
}

#content{   
    display:table-cell;
    vertical-align: middle;
}
</style>

<div id="box">
    <div id="content">My stuff</div>   
</div>

如何制作视口的垂直中心？

3 个答案: