Question

I am having a problem where I position a dialog with “position:absolute” and it works fine putting it in the center of the screen. But then I switch “position:absolute” with “position:fixed” after that and it causes the position to not be in the center. (I’m using latest stable Google Chrome I have.)

What’s the trick so that when I make this switch, it will always be in the center?

Answer 1

You need to use these styles to make it appear dead-center:

position:fixed;
top:50%;
left:50%;
width:400px;  /* adjust as per your needs */
height:400px;   /* adjust as per your needs */
margin-left:-200px;   /* half of width above */
margin-top:-200px;   /* half of height above */

So position should be specified. The top and left should be 50%. The margin-left and margin-top should be negative one half of the width and height of the box respectively.

Notice that position:fixed does not work in IE6.