responsive absolute center within flexslider plugin

Question

I have installed Flexslider jquery plugin. I have some images inside my slides and over each image I want to add some content which will be horizontally and vertically centered regardless screen sizes

I'm trying to use the table-cell technique but it seems that is not working or maybe I'm not using it correctly.

Here's the markup:

<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>

and this is the 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;
}

and here is a jsfiddle

What I want to do is centering the DUMY CONTENT over the image horizontally and vertically without using fixed width and heights because I want it to be responsive.

What I'm doing wrong?

Answer 1

It may be that display:table is not ideal for this situation. It works best when you can pass a specific height to the table or it's container.

I don't know the type of content you're trying to center, but one solution that may work is to position it absolutely in percentages.

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