css - 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/