CSS кросс-браузерное центрирование

Question

Я работаю над всплывающим окном, у меня есть страница, на которой я нажимаю кнопку, на которой появляется всплывающее окно. Проблема заключается в том, что всплывающее окно не находится в центре экрана. Мне нужно сделать перекрестный браузер.

Вот мой код.

CSS:

.popup{ 
    /* css3 drop shadow */ 
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); 
     -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); 
    /* css3 border radius */ 
    -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
    background:#eee; 
    /* styling of the dialog box, i have a fixed dimension for this demo */ 
    width:50%; 
    /* make sure it has the highest z-index */ 
    clear:both; 
    height:240px; 
    position:relative; 
    z-index:5000; 
    /* hide it by default */ 
    display:none; 
} 

Answer 1

по центру по горизонтали и по вертикали:

.popup{ 
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); 
     -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); 
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); 
    -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
      border-radius: 5px; 
    background: #eee; 
    width: 50%; 
    height: 240px; 
    z-index: 5000; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -25%; 
    margin-top: -120px; 
    clear: both; 
// display: none; 
} 

Fiddle: http://jsfiddle.net/AwCWs/