Center a position:fixed element

by

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?

2Best Answer
21

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

Leave a Comment