标签 javascript html css
<分区>
我正在尝试将包含表单的 DIV 居中。我已经设法使背景变灰，并希望将窗体居中放置在窗口中。以下是我到目前为止所做的，但我不知道如何进一步推进以获得我需要的结果。
我可以在水平方向上“自动 margin ”，但我不能在垂直方向上这样做(请看图片)。如果您进一步垂直拉伸(stretch)浏览器窗口，则表单会拉伸(stretch)以占据所有垂直空间。
#idOfForm{
margin: auto;
z-index: 10000;
position: absolute;
background-color: white;
top: 0;
bottom: 0;
left: 0;
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;
}
最佳答案
这是让元素轻松居中的方法:
假设您有以下内容:
<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;
}
关于javascript - 如何居中 DIV 弹出窗口？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38219791/