How to center a ‘div’ in the middle of the screen, even when the page is scrolled up or down with CSS?

Spread the love

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.

Leave a Reply

Your email address will not be published. Required fields are marked *