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

Question

我有一个 BX slider ，其中背景图像随每张幻灯片而变化，背景图像顶部有一个带有文本的 div。我想将此文本 div 垂直居中，但由于文本是动态的，所以它不能有特定的高度。

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

我已经尝试在 <li> 上显示:表格单元格但它不适用于 float:left。请查看我的实时网站上的代码:

你可以找到here我指的 slider 位于带彩色背景的引号区域页脚的正上方。

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

提前致谢。

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
}