將div與固定div垂直對齊作爲父級？

我有一個相對div定位在一個固定的位置div上，我想垂直對齊這第一個div。有沒有辦法做到這一點？這是我目前的標記：將div與固定div垂直對齊作爲父級？

<div class="overlay"> 
    <div id="dialogInvoice"> 
     content 
    </div> 
</div>

的CSS：

.overlay { 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    background-color: rgba(0,0,0,0.5); 
    position: fixed; 
    z-index: 10; 
} 

#dialogInvoice { 
    width: 390px; 
    height: 722px; 
    margin: 0 auto; 
    padding-top: 28px; 
    border-radius: 4px; 
    background: #ffffff; 
    position: relative; 
}

對此有何建議？我確實嘗試了行高度方法，但這顯然只在使用純文本時才起作用。

來源

2014-05-13 2339870

你能舉一個你的目標的例子嗎？ –

https://lh6.googleusercontent.com/-VkKe-DFuEsw/TYTXFh3fJuI/AAAAAAAABRI/9rBS08RlJJc/s1600/Screen+shot+2011-03-19+at+9.47.03+PM.png – 2339870

是否需要#dialognvoice 「位置：親屬」？你可以這樣做，如果你使用position：absolute並設置top：100px和bottom：100px也許 –

如果你的元素沒有固定的寬度或高度，那麼你不能使用其他解決方案，而不使用JavaScript來計算值。

這是一個替代方案。

#dialogInvoice { 
    width: 390px; 
    height: 722px; 
    padding-top: 28px; 
    border-radius: 4px; 
    background: #ffffff; 
    position: absolute; 
    left:50%; 
    top:50%; 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
}

來源

2014-05-13 08:21:27 jono

永遠不會想到這個解決方案......謝謝！ – 2339870

這個CSS可以做你需要什麼：

.overlay { 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    background-color: rgba(0,0,0,0.5); 
    position: fixed; 
    z-index: 10; 
} 

#dialogInvoice { 
    margin: 0 auto; 
    padding-top: 28px; 
    border-radius: 4px; 
    background: #ffffff; 
    position: absolute; 
    top: 100px; 
    bottom:100px; 
    left:100px; 
    right:100px; 
}

來源

2014-05-13 08:07:46

你需要添加到您的#dialogInvoice CSS是什麼

top: 50%;

，改變保證金

margin: 361px auto;

（ 361是722/2）

它會首先將您的容器推向頁面一半，然後將其推回到所需值，該值正好是其高度的一半（361px）

這裏是一個jsfiddle以便更好地理解。

來源

2014-05-13 08:16:14 frieder

謝謝你的jsfiddle例子，使它更清晰。 – 2339870

將div與固定div垂直對齊作爲父級？

回答

相關問題