Estoy tratando de centrar vertical y horizontalmente algunos contenidos sobreponiendo una diapositiva de imagen (flexslider). Hubo algunas preguntas similares a esta, pero no pude encontrar una solución satisfactoria que se aplicara directamente a mi problema específico. Debido a las limitaciones de FlexSlider, no puedo usarposition: absolute; en la etiqueta img en mi implementación.

Casi tengo una solución a continuación trabajando. El único problema es que no puedo hacer que funcionen las declaraciones de ancho y altoinner-wrapper div con eldisplay: table-cell propiedad.

¿Es este comportamiento estándar, o me falta algo con mi código? Si es un comportamiento estándar, ¿cuál es la mejor solución para mi problema?

HTML

<ul>
    <li>
        <img src="#">
        <div class="outer-wrapper">
            <div class="inner-wrapper">
                <h1>My Title</h1>
                <h5>Subtitle</h5>
            </div>
        </div>
    </li>
</ul>

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%;
}

Nota: el contenido centrado será más de 1 elemento, así que no puedo usar el truco de altura de línea.

jsFiddle.