Question

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?

Answer 1

how about adding

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

to .modal-content

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