css - 另一个 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;
}

另一种可能性是将容器设置为显示：表和内部 div 显示：表单元格和垂直对齐：中间。