本文介绍了如何使模式窗口在页面上居中?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！
问题描述
我正在尝试在浏览器页面中居中模式窗口.我只是想把它居中，这样它就可以响应所有的屏幕.
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>
这篇关于如何使模式窗口在页面上居中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！