Sometimes, we want to position element at center of screen with CSS.

In this article, we’ll look at how to position element at center of screen with CSS.

How to position element at center of screen with CSS?

To position element at center of screen with CSS, we set the position of the div to fixed.

Then we translate the div to the center of the screen with various styles.

For instance, we write

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

to style the div with the popup class with the positioning styles.

We set position to fixed to make the div float above other items.

Then we set the top and left properties to 50% to make it move 50% from the top and left side of the screen.

And then we use the transform style to translate the div to the center of the screen.

Conclusion

To position element at center of screen with CSS, we set the position of the div to fixed.

Then we translate the div to the center of the screen with various styles.