Borja Borja - 6 months ago 25
Javascript Question

How to make a vertically center of viewport?

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

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/