如何使模式窗口在页面上居中？

Question

我正在尝试在浏览器页面中居中模式窗口。我只想将它居中，以便它应该对所有屏幕都有响应。

原文由 Raghu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

With position:absolute 假设你的模式是 300x300

 .modal {
   width: 300px;
   height: 300px;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -150px;
   margin-top: -150px;
}

使用 display:table 另一种方法是制作 display table

 <div class="modal">
    <div class="body">
        <div class="content">
            Content goes here
        </div>
    </div>
</div>
<style>
    .modal {display:table;}
    .body {display:table-cell; vertical-align:middle; text-align:center;}
</style>

原文由 Waqar Alamgir 发布，翻译遵循 CC BY-SA 3.0 许可协议