jquery - flexslider 插件中的响应式绝对中心

Question

我已经安装了Flexslider jquery插件。我的幻灯片中有一些图像，我想在每张图像上添加一些内容，无论屏幕大小如何，这些内容都将水平和垂直居中

我正在尝试使用 table-cell 技术，但它似乎不起作用或者我没有正确使用它。

这是标记:

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