如何居中DIV弹出窗口？
这个问题在这里已经有了答案：
这就是您可以轻松地将元素居中的方式：
假设你有以下几点：
<div class="aaa">
fsdfsd
</div>
使用下面的CSS：
.aaa {
transform: translate3d(-50%, -50%, 0);
position: absolute;
top: 50%;
left: 50%;
}
这里是jsfiddle：https：//jsfiddle.net/ffnvjz4q/
这是你需要的代码：
#idOfForm{
transform: translate3d(-50%, -50%, 0);
z-index: 10000;
position: absolute;
background-color: white;
top: 50%;
bottom: 0;
left: 50%;
right: 0;
padding: 10px;
width: 500px;
min-height: 250px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 3px 3px 3px #b8b8b8;
font-family: sans-serif;
color: #484848;
}
你的“应用程序”必须支持哪些浏览器？ 实现这个最简单的方法是使用CSS flexbox，但尚未完全支持
http://caniuse.com/#search=flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.parent {
display: flex;
height: 300px; /* Or whatever */
}
.child {
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! */
}
<div class="modal">
<div class="modal-body">
<!-----put your form code here --->
</div>
</div>
.modal {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
z-index: 2;
}
.modal-body {
position: relative;
max-width: 500px;
width: 100%;
margin: 50px auto 20px;
background-color: #fff;
min-height: 50px;
}