另一個DIV CSS垂直對齊問題

Question

我知道關於CSS垂直對齊有一百萬個問題，但我相信我有一個稍微有點新問題。

我有一個容器層和一個子層，內層有固定的大小，但我的包裝層有一個可變的高度，百分比，具有固定的最小高度。 我遇到的問題是，我可以垂直對齊最小高度場景或百分比高度場景但不能同時對齊。

我有一種感覺，解決方案最有可能涉及jQuery以像素為單位確定包裝層的高度，並使用position：rel;將負邊距應用於內部層。 頂部：50％; 但我想我會問，任何人之前都遇到過這種情況。

我的css具有以下屬性：

#container {
height:82%;
min-height:600px;
width:938px;
}
#container div {
width:400px;
height:400px;
padding:70px;
border-radius:100%;
text-align:center;
}

Answer 1

為容器層提供display: table的css屬性值。 我想這會解決你的問題。

#container {
    display: table;
}

Answer 2

這個問題沒什么新意。 不過，這是答案：

#container {
height:82%;
min-height:600px;
width:938px;
position: relative;
}
#container div {
width:400px;
height:400px;
padding:70px;
border-radius:100%;
text-align:center;
position: absolute;
top: 50%;
left: 50%
margin-top: -270px;
margin-left: -270px;
}

另一個可能性是將容器設置為display：table和要顯示的內部div：table-cell和vertical-align：middle。