我正在尝试将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>

最佳答案

基于您声明的宽度和高度为100%的事实,我将假设您不希望有人在此处滚动。 See this Fiddle,其中有一个基于这些参数的有效解决方案。

请记住,display: table-cell;的行为与<td>元素完全相同,除非它们位于<table>(或display: table;的容器)中,否则它们无法正确呈现。

另一个问题是,如果内容很小,<html><body>不一定是屏幕的高度。 html, body { height: 100%; }可以解决此问题,但是有点hacky。

关于css - 为什么百分比高度不能与显示: table-cell?一起使用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/8721282/

10-12 12:52
查看更多