Tutorial: How to vertical align center on the screen while scrolling with CSS

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.