I&#39;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&#39;t find a satisfactory solution that applied directly to my specific problem.  Because of the limitations of FlexSlider, I cannot use `position: absolute;` on the img tag in my implementation.

I almost have workaround below working. The only problem is I cannot get the width &amp; height declarations to work on `inner-wrapper` div with the `display: table-cell` property.  

Is this standard behavior, or am I missing something with my code?  If it&#39;s standard behavior, what&#39;s the best solution to my problem?

**HTML**

    &lt;ul&gt;
        &lt;li&gt;
            &lt;img src=&quot;#&quot;&gt;
            &lt;div class=&quot;outer-wrapper&quot;&gt;
                &lt;div class=&quot;inner-wrapper&quot;&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;

**CSS**

    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%;
    }

Note: the centered content will be more than 1 element, so I can&#39;t use the line-height trick.

[jsFiddle][1].

  [1]: http://jsfiddle.net/timshutes/5pAA3/1/

All Flexslider Solutions on Gang of Coders

Total of 1 Flexslider Solutions

Why is width: 100% not working on div {display: table-cell}?