Question

I’m using the following style, on an Ajax modal popup. The Width is set correctly, but it is aligned on the left side of the screen. If I set the width to a fixed number, eg 600px, it becomes centered. Is there a way to do both centered and based on a percentage?

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

Answer 1

Try

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