How to center a div vertically from a unknown dynamic height?

Question

In my code there could be hundreds of elements depending on how much images is added to the pages, meaning the height of the page could be between 0 to 1000s or even more.

How would I center a overlay div in the middle of the page. The webpage is more or less trying to mimic Instagram, you can have hundreds of images but once you click on one of them the overlay is still set in the middle of the page.

This is the main div for the overlay of the images. this div works fine as long as the page is no longer than the view height of the page, if the height is too large that you have to scroll down, then it will mess with the position of the vertical. I know this problem is because im setting the bottom to 15% so it takes in consideration the entire height value. But I dont know how I can fix that.

.overlayImgContainer{
        position: absolute;
        height: 70%;
        width: 120%;// (page is set to 960px this add a bit more room)
        z-index: 1;
        bottom: 15%;
        left: -10%;
        background-color: rgba(0,0,0,0.5);
        overflow-x: hidden;
        border-radius: 5px;
        text-align: center;
}

1) Add demo. 2) Search - your question was answered many times. — plvice, Nov 30 '17 at 09:39
There must be hundreds of answers for this already. It basically sounds like a modal window that you're after. — dom_ahdigital, Nov 30 '17 at 09:39
Questions asked here was to do with centering vertically but with a know height. I dont know the height of the page. — , Nov 30 '17 at 09:43

score -1 · Answer 1 · answered Nov 30 '17 at 09:44

-1

You can use flexboxes for that.

CSS

.wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
}

HTML

<div class="wrapper">
   <div>...</div>
</div>

answered Nov 30 '17 at 09:44

sam-s3pi0l

73
1
5

How to center a div vertically from a unknown dynamic height?

1 Answers1