Center a position:fixed element
I would like to make a
position: fixed; popup box centered to the screen with a dynamic width and height. I used
margin: 5% auto; for this. Without
position: fixed; it centers fine horizontally, but not vertically. After adding
position: fixed;, it’s even not centering horizontally.
Here’s the complete set:
How do I center this box in screen with CSS?
I want to make a popup box centered to the screen with dynamic width and height.
Here is a modern approach for horizontally centering an element with a dynamic width - it works in all modern browsers; support can be seen here.
For both vertical and horizontal centering you could use the following:
You may wish to add in more vendor prefixed properties too (see the examples).