Why is width: 100% not working on div {display: table-cell}?

Question

I\'m trying to vertically and horizontally center some content overlaying an image slide (flexslider). There were some similar questions to this one, but I couldn\'t find a

Answer 1

Your 100% means 100% of the viewport, you can fix that using the vw unit besides the % unit at the width. The problem is that 100vw is related to the viewport, besides % is related to parent tag. Do like that:

.table-cell-wrapper {
    width: 100vw;
    height: 100%;  
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}