如何在页面上将模式窗口居中? [英] 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.

推荐答案

位置:绝对假设您的模式为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>

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