[css] 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 {_x000D_
    position: fixed;_x000D_
    width: 500px;_x000D_
    height: 200px;_x000D_
    margin: 5% auto;_x000D_
    padding: 10px;_x000D_
    border: 5px solid #ccc;_x000D_
    background-color: #fff;_x000D_
}

<div class="jqbox_innerhtml">_x000D_
    This should be inside a horizontally_x000D_
    and vertically centered box._x000D_
</div>

How do I center this box in screen with CSS?

I used vw (viewport width) and vh (viewport height). viewport is your entire screen. 100vw is your screens total width and 100vh is total height.

.class_name{
    width: 50vw;
    height: 50vh;
    border: 1px solid red;
    position: fixed;
    left: 25vw;top: 25vh;   
}

You can basically wrap it into another div and set its position to fixed.

.bg {_x000D_
  position: fixed;_x000D_
  width: 100%;_x000D_
}_x000D_
_x000D_
.jqbox_innerhtml {_x000D_
  width: 500px;_x000D_
  height: 200px;_x000D_
  margin: 5% auto;_x000D_
  padding: 10px;_x000D_
  border: 5px solid #ccc;_x000D_
  background-color: #fff;_x000D_
}

<div class="bg">_x000D_
  <div class="jqbox_innerhtml">_x000D_
    This should be inside a horizontally and vertically centered box._x000D_
  </div>_x000D_
</div>

Try using this for horizontal elements that won't center correctly.

width: calc (width: 100% - width whatever else is off centering it)

For example if your side navigation bar is 200px:

width: calc(100% - 200px);

I just use something like this:

.c-dialogbox {
    --width:  56rem;
    --height: 32rem;

    position: fixed;

    width:  var(--width);
    height: var(--height);
    left:   calc( ( 100% - var(--width) ) / 2 );
    right:  calc( ( 100% - var(--width) ) / 2 );
    top:    calc( ( 100% - var(--height) ) / 2 );
    bottom: calc( ( 100% - var(--height) ) / 2 );
}

It centers the dialog box both horizontally and vertically for me, and I can use different width and height to fit different screen resolutions to make it responsive, with media queries.

Not an option if you still need to provide support for browsers where CSS custom properties or calc() are not supported (check on caniuse.)

left: 0;
right: 0;

Was not working under IE7.

Changed to

left:auto;
right:auto;

Started working but in the rest browsers it stop working! So used this way for IE7 below

if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {                                
  strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}

The only foolproof solution is to use table align=center as in:

<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>

I cannot believe people all over the world wasting these copious amount to silly time to solve such a fundamental problem as centering a div. css solution does not work for all browsers, jquery solution is a software computational solution and is not an option for other reasons.

I have wasted too much time repeatedly to avoid using table, but experience tell me to stop fighting it. Use table for centering div. Works all the time in all browsers! Never worry any more.

Or just add left: 0 and right: 0 to your original CSS, which makes it behave similarly to a regular non-fixed element and the usual auto-margin technique works:

.jqbox_innerhtml
{
  position: fixed;
  width:500px;
  height:200px;
  background-color:#FFF;
  padding:10px;
  border:5px solid #CCC;
  z-index:200;
  margin: 5% auto;
  left: 0;
  right: 0;
}

Note you need to use a valid (X)HTML DOCTYPE for it to behave correctly in IE (which you should of course have anyway..!)

This works wonderfully when you don't know the size of the thing you are centering, and you want it centered in all screen sizes:

.modal {
  position: fixed;
  width: 90%;
  height: 90%;
  top: 5%;           /* (100 - height) / 2 */
  left: 5%;          /* (100 - width) / 2 */
}

#modal {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

inside it can be any element with diffenet width, height or without. all are centered.

Add a container like:

div {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

Then put your box into this div will do the work.

Edit: as mentioned in the comments, the inner content needs to be set to display: inline-block assuming there're two divs like:

    <div class="outer">
        <div class="inner">
             content goes here
        </div>
    </div>

Then the CSS for the inner needs to be:

    .outer {
        position: fixed;
        text-align: center;
        left: 0;
        right: 0;
    }
    .inner {
        display: inline-block;
    }

Together with the outer div having a left: 0; right:0; and text-align: center this will align the inner div centered, without explicitly specifying the width of the inner div.

Just add:

left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;

This one worked the best for me:

    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

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

One possible answer:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Center Background Demo</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        div.centred_background_stage_1 {
            position: fixed;
            z-index:(-1 );
            top: 45%;
            left: 50%;
        }

        div.centred_background_stage_2 {
            position: relative;
            left: -50%;

            top: -208px;
            /* % does not work.
               According to the
               http://reeddesign.co.uk/test/points-pixels.html
               6pt is about 8px

               In the case of this demo the background
               text consists of three lines with
               font size 80pt.

               3 lines (with space between the lines)
               times 80pt is about
               ~3*(1.3)*80pt*(8px/6pt)~ 416px

               50% from the 416px = 208px
             */

            text-align: left;
            vertical-align: top;
        }

        #bells_and_wistles_for_the_demo {
            font-family: monospace;
            font-size: 80pt;
            font-weight: bold;
            color: #E0E0E0;
        }

        div.centred_background_foreground {
            z-index: 1;
            position: relative;
        }
    </style>
</head>
<body>
<div class="centred_background_stage_1">
    <div class="centred_background_stage_2">
        <div id="bells_and_wistles_for_the_demo">
            World<br/>
            Wide<br/>
            Web
        </div>
    </div>
</div>
<div class="centred_background_foreground">
    This is a demo for <br/>
    <a href="http://stackoverflow.com/questions/2005954/center-element-with-positionfixed">
        http://stackoverflow.com/questions/2005954/center-element-with-positionfixed
    </a>
    <br/><br/>
    <a href="http://www.starwreck.com/" style="border: 0px;">
        <img src="./star_wreck_in_the_perkinnintg.jpg"
             style="opacity:0.1;"/>
    </a>
    <br/>
</div>
</body>
</html>

What I use is simple. For example I have a nav bar that is position : fixed so I adjust it to leave a small space to the edges like this.

nav {
right: 1%;
width: 98%;
position: fixed;
margin: auto;
padding: 0;
}

The idea is to take the remainder percentage of the width "in this case 2%" and use the half of it.

Center fixed position element

It will not limit centered element's width less than viewport width, when using margins in flexbox inside centered element (a very good solution by far)

top: 0; left: 0;
transform: translate(calc(50vw - 50%));

Also for centering it vertically

top: 0; left: 0;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));

This solution does not require of you to define a width and height to your popup div.

http://jsfiddle.net/4Ly4B/33/

And instead of calculating the size of the popup, and minus half to the top, javascript is resizeing the popupContainer to fill out the whole screen...

(100% height, does not work when useing display:table-cell; (wich is required to center something vertically))...

Anyway it works :)

To fix the position use this :

div {
    position: fixed;
    left: 68%;
    transform: translateX(-8%);
}

simple, try this

position: fixed;
width: 500px;
height: 300px;
top: calc(50% - 150px);
left: calc(50% - 250px);
background-color: red;