How to position element at center of screen with CSS?

We want to position element at center of screen with CSS, sometimes

How to position element at center of screen, we will look at in this article 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.
After that we translate the div to the center of the screen with different 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, from the top and left side of the screen, to make it move 50% we set the top and left properties to 50% .

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 different styles.