Why doesn't percentage height work with display: table-cell?

[aldahir]

I'm trying to center both horizontally and vertically a div inside an outer div. It works when the outer div has specific width and height set in pixels like \[code\]#countdownBox { width: 700px; height: 500px; display: table-cell; vertical-align: middle; text-align: center;}\[/code\]but it fails when the height and width are percentages like\[code\]#countdownBox { width: 100%; height: 100%; display: table-cell; vertical-align: middle; text-align: center;}\[/code\]Why is this and is there a work around?EDIT Here is the HTML with container CSS:\[code\]#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>\[/code\]