如何居中DIV彈出窗口？

Question

我想中心包含一個窗體的DIV。我已經設法使背景變灰，並希望將窗體置於窗口中央。以下是我迄今爲止所做的，但我不知道如何進一步取得我需要的結果。

我能夠'自動保證金'水平，但我不能夠垂直做到這一點（請參閱圖像）。如果您進一步垂直拉伸瀏覽器窗口，表單會拉伸以佔據所有的垂直空間。

#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

你可以嘗試

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

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

Answer 3

貴 '應用' 必須支持哪些瀏覽器？實現這一目標最簡單的方法是使用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 4

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