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

Question

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

.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 */
}