如何使視口垂直居中？

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 ， 顯示為：none 。 因此，僅在框的外觀期間在視口中對齊。 當他移動頁面（滾動）時，對齊方式無關緊要。

這是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/

我將編輯答案，以包括如何使燈箱在滾動時保持固定（如果我正確理解了您的問題，如果用戶滾動，則希望燈箱保持在固定位置，但如果窗口/視口處於調整大小。）

**我撒謊了，我目前的解決方案是在滾動時讓燈箱保持在初始位置-如果您希望它跟隨滾動頁面，您可以將其添加到代碼中：

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

**更新**我已經更新了我的代碼，在底部包括lorem ipsum，以提供滾動顯示-測試此鏈接，如果“它不起作用”，那么您的問題是錯誤的。 https://jsfiddle.net/rockmandew/tvafw5Ls/18/

Answer 2

使用您的JS，我想出了這個小提琴

我所做的就是將您最初的#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放置在窗口的死點中。 我也給了盒子一個width和max-width，所以你的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>