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％的事实，我将假设您不希望任何人必须在此处滚动。 See this Fiddle我有一个基于这些参数的工作解决方案。

请注意，display: table-cell;的行为与<td>元素完全相同，除非它们位于<table>（或display: table;的容器中），否则它们无法正确呈现。

另一个问题是，如果内容非常小，<html>和<body>不一定是屏幕的高度。 html, body { height: 100%; }解决了这个问题，但这有点笨拙。

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

1 个答案: