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