Center content in the visible part of a div

Question

I have a container div, which expands as the site lazy loads, thus becoming taller and taller as the user scrolls, up until all content is loaded. In this container, I have some content that I want to have centered in the visible part of container div, regardless of where the user has scrolled.

eg the user has scrolled enough to load all the content, and the scrolls all the way back up. The content should still be centered in the div relative to how much of the container div is visible in the viewport at any time.

What I've tried is having the content as position: fixed; although this makes sure the content is always visible wherever the user scrolls, having the content centered is still an issue. Justify-content does not work either as it is relative to the size of the container, and not the viewport.

Any help would be appreciated!

Answer 1

Im not sure about what you are asking but i got a demo for you. Please check it & provide more information if you want to do something else

  .wrapper { width: 300px; height: 300px; background: red; position: relative; } .scrollable-area { height: 100%; overflow: auto; } .centered-element { width: 100px; height: 100px; background: #000; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .row { height: 100px; background: blue; margin-top: 10px; } 

 <div class="wrapper"> <div class="centered-element"></div> <div class="scrollable-area"> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> </div> </div>