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:

.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?


solution

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.

Updated Example

.jqbox_innerhtml {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
}

For both vertical and horizontal centering you could use the following:

Updated Example

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

You may wish to add in more vendor prefixed properties too (see the examples).