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; 
} 

小提琴：http://jsfiddle.net/AwCWs/