Css简单的模态规则

Question

我有一个简单的模态div：

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

然后他们有相关的Css规则：

.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%;}

我想要的是.modal-content始终以页面为中心，最大宽度为500px;而width：auto;

可以不使用js吗？

Answer 1

这有点棘手，但可以实现。看看这里的一些例子： http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

使用Javascript和jQuery更容易，特别是如果你的容器可以有一个固定的位置。您需要支持哪些浏览器？

Answer 2

如何添加

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

到.modal-content

希望这就是你所寻找的，欢呼。