如何使视口垂直居中？

Question

I explain my problem:

I have created an overlay, there is a gallery of thumbnail images and clicking on a picture, it will appear in a box with the image clicked to larger (the size fit the width of the window). This box is perfectly aligned horizontally and alignment remains even if you resize the window.

The problem is that I want a vertical alignment of the box. Aligned in the viewport, because I wish it was immediately visible. But I do not want during the scroll, the box does not move together with the page. (therefore be excluded display: fixed )

Now the box is so:

#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;
}

The div #box before that image is clicked, has display:none . So the alignment in the viewport would only during the appearance of the box. When he moves the page (scroll) alignment does not matter.

This is jsfiddle: http://jsfiddle.net/tvafw5Ls/13/

If is possible to do this only with CSS3 is better, but also solution with js is ok.

I hope that can you help me! Thanks a lot!

Answer 1

Alright, here is your JsFiddle updated with the viewport centering - I adjusted this part of your code to look like so:

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%)');

        }

    });

What this is doing, is a nifty css trick that looks like this:

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%);

This will vertically and horizontally center anything in CSS.

Here is the JsFiddle - https://jsfiddle.net/rockmandew/tvafw5Ls/17/

I will edit my answer to include how to make the lightbox stay fixed when scroll (if I understand your question correctly, you want the lightbox to stay in a fixed position if the user scrolls, but for it to center if the window/viewport is resized.)

** I lied, my current solution will make the lightbox stay in the initial position when scrolling - if you wanted it to follow the page on scroll you would add this to your code:

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

** UPDATE ** I have updated my code to include lorem ipsum at the bottom to provide a scroll - test this link, if "it doesn't work" then your question is wrong. https://jsfiddle.net/rockmandew/tvafw5Ls/18/

Answer 2

Using your JS, I've come up with This Fiddle

What I've done is changed your initial #box css to this:

#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%;
}

Notice how I've changed the box to initially have the fixed position. Then I've placed it in the dead center of the window using translate-negative-position. I've also given the box a width and max-width so your js doesn't need to handle that.

After that, I've done a few things to your JS. I removed the CSS you've given the box with the translate3d, then I've found the initial position of the fixed box, changed the position to absolute and given the height of the box position.

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"
});

UPDATE I've turned the fixed-to-absolute solution into a function and have made it run on load and window resize. I've also edited a bit more of your CSS, making your #box have a max-width and width. Take a look at the fiddle for the example.

Answer 3

Pure CSS way, simulating a table and a cell, works nice in every modern browser. To just give you the base idea. 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>