отзывчивый абсолютный центр в плагине flexslider

Question

Я установил Flexslider jquery plugin. У меня есть несколько изображений в моих слайдах и над каждым изображением я хочу добавить некоторое содержание, которое будет по горизонтали и по вертикали по центру независимо от размеров экрана

Я пытаюсь использовать таблицу клеток технику, но кажется, что это не работает или, может быть, я не использую его правильно.

Вот разметка:

<div id="slider" class="flexslider is-Table"> 
<ul class="slides"> 
    <li> 
     <div class="Table-Cell"> 
      <div class="Center-Block"> 
       DUMMY CENTERED CONTENT 
      </div> 
     </div> 
     <img src="http://placehold.it/1400x700" /> 
    </li> 
    <li> 
     <img src="http://placehold.it/1400x700" /> 
    </li> 
    <li> 
     <img src="http://placehold.it/1400x700" /> 
    </li> 
</ul> 

и это CSS:

#slider {border:none;} 
.is-Table {display:table;} 

.Table-Cell { 
display: table-cell; 
vertical-align: middle; 
} 

.Center-Block { 
width: 50%; 
margin: 0 auto; 
z-index:999999; 
} 

и вот jsfiddle

То, что я хочу сделать, это центрирования DUMY CONTENT над изображением горизонтально и вертикально без использования фиксированной ширины и высоты, потому что я хочу, чтобы она была отзывчивой.

Что я делаю неправильно?

Answer 1

Возможно, display:table не подходит для этой ситуации. Он лучше всего работает, когда вы можете передать определенную высоту таблице или контейнеру.

Я не знаю тип контента, который вы пытаетесь центрировать, но одно решение, которое может работать, состоит в том, чтобы позиционировать его абсолютно в процентах.

Demo Fiddle

HTML:

<div id="slider" class="flexslider is-Table"> 
    <ul class="slides"> 
     <li> 
      <div class="centered"> 
        DUMMY CENTERED CONTENT 
      </div> 
      <img src="http://placehold.it/1400x700" /> 
     </li> 
     <li> 
      <img src="http://placehold.it/1400x700" /> 
     </li> 
     <li> 
      <img src="http://placehold.it/1400x700" /> 
     </li> 
    </ul> 
</div> 

CSS:

.slides > li { 
    position: relative; 
} 
.centered { 
    position: absolute; 
    top: 50%; 
    left: 30%; 
}