Próbuję pionowo i poziomo wyśrodkować niektóre treści nakładające się na slajd obrazu (flexslider). Było kilka podobnych pytań do tego, ale nie mogłem znaleźć zadowalającego rozwiązania, które odnosi się bezpośrednio do mojego konkretnego problemu. Ze względu na ograniczenia FlexSlider nie mogę używaćposition: absolute; na tagu img w mojej implementacji.

Prawie mam obejście poniżej pracy. Jedynym problemem jest to, że nie mogę uzyskać deklaracji szerokości i wysokościinner-wrapper div za pomocądisplay: table-cell własność.

Czy to standardowe zachowanie, czy brakuje mi czegoś z moim kodem? Jeśli jest to standardowe zachowanie, jakie jest najlepsze rozwiązanie mojego problemu?

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

Uwaga: treść wyśrodkowana będzie miała więcej niż 1 element, więc nie mogę użyć sztuczki wysokości linii.

jsFiddle.