在BX Slider中垂直对齐动态文本div

Question

我有一个BX滑块，其中背景图像随每张幻灯片而变化，并且在背景图像的顶部有一个带有文本的div。我想垂直居中这个文本div，但它不能有特定的高度，因为文本是动态的。

我也希望能够在所有屏幕尺寸上响应它。

我在<li>上尝试过显示：table-cell但是它不适用于float：left。请查看我的实际网站上的代码：

您可以找到here我所指的滑块位于带有彩色背景的引号区域中的页脚正上方。

我很接近，但我提出的解决方案需要一个高度声明，它不适用于所有幻灯片。

提前感谢。

Answer 1

使用flexbox。

HTML：

<div id="parent">
   <div id="child">Your text</div>
</div>

CSS：

#parent
{
    display:flex;
}
#child
{
    margin:auto; //this will center #child both horizontally and vertically
}

Answer 2

.container {
    display: flex;
    align-items: center;
}

全部;-）