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

一切就绪 ;-)

Vertically align dynamic text div within BX Slider