title: Why doesn't percentage height work with display: table-cell?
body: <p>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 </p>
  
  <pre><code>#countdownBox {
      width: 700px;
      height: 500px;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
  }
  </code></pre>
  
  <p>but it fails when the height and width are percentages like</p>
  
  <pre><code>#countdownBox {
      width: 100%;
      height: 100%;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
  }
  </code></pre>
  
  <p>Why is this and is there a work around?</p>
  
  <p><strong>EDIT</strong> Here is the HTML with container CSS:</p>
  
  <pre><code>#countdownBoxContainer {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  }
  
  &lt;div id="countdownBoxContainer"&gt;
      &lt;div id="countdownBox"&gt;
        &lt;div&gt;
          hi there
        &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>