I believe some of you out there also faced this problem where your container is align on the center of the screen but when the screen is too long, the scroll bar appeared and your box remained on the top of the screen and you say "oh shit!". Searching all over the internet and found only how container can be align on the center of the screen but not when it was scrolling? I think this article will solve your problem.
The Problem
We are assuming here that you have aligned your container at the center of the screen with position absolute. If you are still having this problem, you may want to visit How to align center on the screen when using position absolute with CSS. Once your container has aligned on the center of the screen. You meet the problem of having it follow you while you scroll down the screen. I like to say that the container is not persistence enough! Let's make it persistence to follow your scroller.
The Concept
Basically, you can solve your container not aligned on center while scrolling with the following concept:
- You can create a code of jQuery/JavaScript to accomplish this by making your container chasing after your scroller. Thus, changing the container position on every scroller movement. (not good)
- The other way is to just CSS (which we are doing) to cheat the above effect. Instead of chasing after the scroller, we fixed the position on the center of the screen while having absolute to cover all other elements!
We will be doing the second approach which is more efficient and is the more correct way of doing. The reason why it must be position fixed is that the container should not move! Thus, stay at the center of the screen when you scroll. As for the reason why it must also be position as absolute is because we need to cover up all element below to prevent any user from clicking on the elements!
The Solution
The Trick is fairly simple after you have accomplished your center alignment on the screen with absolute position. I take the following code from the article and change it so that the container will remain center while scrolling.
#box
{
width: 150px;
height: 150px;
background: red;
padding: 5px;
border: #CCC solid 1px;
text-align: center;
position: fixed;
margin-left: -75px;
margin-top: -75px;
left: 50%;
top: 50%;
}
The above is the one was in the article given in the link. Now i will just change the styling a bit to red and size accordingly and the new code that will make it remain center will be as follow,
#box
{
width: 150px;
height: 150px;
background: #000;
padding: 5px;
border: #CCC solid 5px;
text-align: center;
position: fixed;
margin-left: -75px;
margin-top: -75px;
left: 50%;
top: 50%;
}
The main changes done was 'position:fixed' which fixed your container at the center of the screen whenever it go! Persistence enough.
The Demo
The following links are the demo for persistence and non-persistence container: