Vertically align dynamic text div within BX Slider

Question

I have a BX slider where the background image changes with each slide and there is a div with text on top of the background image. I would like to vertically center this text div, but it cannot have a specific height since the text is dynamic.

I am also hoping to get it to work responsively across all screen sizes.

I have tried display: table-cell on the <li> but it doesn't work with the float:left. Please see the code on my live site:

You can find here The slider that I am referring to is directly above the footer in the quote area with colored backgrounds.

I am close, but the solution I have come up with requires a height declaration which doesn't work with all of the slides.

thanks in advance.

Answer 1

Use 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
}