为什么百分比高度不适用于display：table-cell？

Question

我试图在水平和垂直方向上将div放在外部div中。 它适用于外部div具有特定的宽度和高度设置像素

#countdownBox {
    width: 700px;
    height: 500px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

但是当高度和宽度都是百分比时，它会失败

#countdownBox {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

为什么会这样，是否有解决方法？

编辑这是带有容器CSS的HTML：

#countdownBoxContainer {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 3;
}

<div id="countdownBoxContainer">
    <div id="countdownBox">
      <div>
        hi there
      </div>
    </div>
 </div>

Answer 1

基于您宣布宽度和高度为100％这一事实，我将假设您不希望任何人必须在这里滚动。 看到这个小提琴 ，我有一个基于这些参数的工作解决方案。

记住display: table-cell; 与<td>元素完全相同，除非它们位于<table> （或者是display: table;的容器）中，否则它们将无法正确呈现。

另一个问题是，如果内容非常小， <html>和<body>不一定是屏幕的高度。 html, body { height: 100%; } html, body { height: 100%; }修复这一点，但它是一个有点哈克。