Sometimes, we want to center a ‘div’ in the middle of the screen, even when the page is scrolled up or down with CSS.
In this article, we’ll look at how to center a ‘div’ in the middle of the screen, even when the page is scrolled up or down with CSS.
How to center a ‘div’ in the middle of the screen, even when the page is scrolled up or down with CSS?
To center a ‘div’ in the middle of the screen, even when the page is scrolled up or down with CSS, we set the position to fixed.
For instance, we write
.PopupPanel {
border: solid 1px black;
position: fixed;
left: 50%;
top: 50%;
background-color: white;
z-index: 100;
height: 400px;
margin-top: -200px;
width: 600px;
margin-left: -300px;
}
to set the position to fixed to make the elements with class PopupPanel always stay on the same position on the screen.
Conclusion
To center a ‘div’ in the middle of the screen, even when the page is scrolled up or down with CSS, we set the position to fixed.
