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

另一个可能性是设置容器显示：table和要显示的内部div：table-cell和vertical-align：middle。

另一个DIV CSS垂直对齐问题

2 个答案: