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

【问题标题】：Vertically align dynamic text div within BX Slider在 BX Slider 中垂直对齐动态文本 div
【发布时间】：2019-01-01 04:14:14
【问题描述】：

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

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

我已经尝试在<li> 上显示：table-cell，但它不适用于 float:left。请在我的网站上查看代码：

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

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

提前致谢。

【问题讨论】：

【解决方案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
}

【讨论】：

太棒了。谢谢。我花了一段时间才让它跨浏览器工作，但最终我做到了：#parent { display: -webkit-box;显示：-webkit-flex；显示：-ms-flexbox；显示：弯曲； -webkit-box-align：居中； -webkit-align-items：居中； -ms-flex-align：居中；对齐项目：居中；高度：600px； -webkit-box-pack：中心； -webkit-justify-content：中心； -ms-flex-pack：中心；证明内容：中心； } #child { -webkit-box-flex: 0; -webkit-flex：无； -ms-flex：无；弹性：无；宽度：90%；最大宽度：900px； }

【解决方案2】：

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

就是这样;-)

【讨论】：