title: Why is width: 100% not working on div {display: table-cell}?
body: <p>I'm trying to vertically and horizontally center some content overlaying an image slide (flexslider).  There were some similar questions to this one, but I couldn't find a satisfactory solution that applied directly to my specific problem.  Because of the limitations of FlexSlider, I cannot use <code>position: absolute;</code> on the img tag in my implementation.</p>
  
  <p>I almost have workaround below working. The only problem is I cannot get the width &amp; height declarations to work on <code>inner-wrapper</code> div with the <code>display: table-cell</code> property.  </p>
  
  <p>Is this standard behavior, or am I missing something with my code?  If it's standard behavior, what's the best solution to my problem?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;img src="#"&gt;
          &lt;div class="outer-wrapper"&gt;
              &lt;div class="inner-wrapper"&gt;
                  &lt;h1&gt;My Title&lt;/h1&gt;
                  &lt;h5&gt;Subtitle&lt;/h5&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>html, body {
      margin: 0; padding: 0;
      width: 100%; height: 100%;
  }
  
  ul {
      background: #CCC;
      height: 100%;
      width: 100%;
      list-style-position: outside;
      margin: 0; padding: 0;
  }
  
  li {
      width: 100%;
      display: table;
  }
  
  img {
      width: 100%;
      height: 410px;
  }
  
  .outer-wrapper {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      margin: 0; padding: 0;
  }
  
  .inner-wrapper {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      width: 100%;
      height: 100%;
  }
  </code></pre>
  
  <p>Note: the centered content will be more than 1 element, so I can't use the line-height trick.</p>
  
  <p><a href="http://jsfiddle.net/timshutes/5pAA3/1/" rel="noreferrer">jsFiddle</a>.</p>