html - 如何创建一个居中的 AJAX 模式弹出窗口，其宽度是基于百分比的？

Question

我在 Ajax 模式弹出窗口上使用以下样式。宽度设置正确，但它在屏幕左侧对齐。如果我将宽度设置为固定数字，例如 600 像素，它就会居中。有没有办法既以百分比为中心又以百分比为基础？

.modalPopup {
    background-color:#ffffff;
    border-width:3px;
    border-style:solid;
    border-color:Gray;
    padding:3px;
    position:relative;
    width:80%;
}

Answer 1

尝试

.modalPopup {
    background:#fff;
    border:3px solid gray;
    padding:3px;
    position:relative;
    width:80%;
    margin: 0 10%; /* percent based margins will do the trick */
}

Answer 2

这是我最终使用的，但 Zoltan 向我展示了方法。如果需要，这允许我有一个滚动条。

.modalPopup {
    background:#fff; 
    border:3px solid gray; 
    padding:3px; 
    position:relative; 
    width: 80%;
    height: 400px;
    margin:0 10%; 
    overflow:auto;
}