如何集中DIV弹出窗口？

Question

我试图将包含表格的DIV居中。我已经成功地将背景灰化，并希望将窗体置于窗口中心。以下是我到目前为止所做的工作，但我不知道如何进一步推进以获得我需要的结果。

我能够自动保证金＆＃39;水平，但我不能垂直这样做（请参见图片）。如果您进一步垂直拉伸浏览器窗口，表单会拉伸以占据所有垂直空间。

 #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;
 }

Answer 1

这就是你可以轻松集中元素的方法：

假设您有以下内容：

<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;
 }

Answer 2

您的应用程序使用什么浏览器？必须支持？实现这一目标的最简单方法是使用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! */
}

Answer 3

{{1}}

Answer 4

你可以尝试

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

来源：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/