Css simple modal rules

i have a simple modal divs:

<div class="modal"></div>
<div class="modal-content"></div>

then theyr related Css rules:

.modal{position:fixed;background:#444;opacity:0.5;width:100%;height:100%;left:0;right:0;bottom:0;top:0;}
.modal-content{position:fixed;background:#fff;width:auto;height:auto;top:25%;开发者_运维问答left:25%;right:25%;}

what i would like is that .modal-content remains always centered on page with a max-width of 500px; while width:auto;

is it possible to do without using js?

how about adding

max-width:500px;
margin:0 auto 0 auto;

to .modal-content

Hope that's what you were looking for, cheers.

It's a bit tricky, but can be achieved. Have a look here for some examples: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

A lot easier to do with Javascript and jQuery though, especially if your container can have a fixed position. What browsers do you need to support?