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

How to center a modal window on a page?(如何使模式窗口在页面上居中?)

问题描述

我正在尝试在浏览器页面中居中模式窗口.我只是想把它居中，这样它就可以响应所有的屏幕.

I am trying center a modal window in the browser page. I just want to center it, so that it should be responsive for all the screens.

推荐答案

With position:absolute 假设你的modal是300x300

With position:absolute Assuming your modal is 300x300

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

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

With display:table An alternative way for that is to make 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>

这篇关于如何使模式窗口在页面上居中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！