另一个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

给容器层一个css属性值display: table。我认为这会解决你的问题。

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

另一个posiibility将设置为显示容器中：表和内div来显示：表 - 细胞和垂直对齐：中间。