Center a position:fixed element

centering, css, css-position

Solution

If your div has a known width and height, then you basically need to set `top` and `left` to `50%` to center the left-top corner of the div. You also need to set the `margin-top` and `margin-left` to the negative half of the div's height and width to shift the center towards the middle of the div.

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */

Or, if your div has a dynamic/undefined width and/or height, then instead of the `margin`, set the `transform` to the negative half of the div's relative width and height.

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Or, if your div has at least a fixed width and you don't really care about centering vertically, then you can instead also add `left: 0` and `right: 0` to the element having a `margin-left` and `margin-right` of `auto`, so that the fixed positioned element having a fixed width knows where its left and right offsets start. In your case thus:

position: fixed;
width: 500px;
margin: 5% auto; /* Only centers horizontally not vertically! */
left: 0;
right: 0;

Problem

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: ``` .jqbox_innerhtml { position: fixed; width: 500px; height: 200px; margin: 5% auto; padding: 10px; border: 5px solid #ccc; background-color: #fff; } ``` ``` <div class="jqbox_innerhtml"> This should be inside a horizontally and vertically centered box. </div> ``` How do I center this box in screen with CSS?

Original source