Using flexbox I have a 100vh orange div #video and a layer on top called #text.
The #text layer has a dark bg that should cover the #video layer & vertically align the text.
If I set the #text div height to 100% or #video CSS to *align-items: center; it will cover the orange div completely, but align the text to the very top (not in the middle of the orange layer).
Any ideas how I can get this to work, so the orange and black layer are always 100% viewport height and the text is always vertically aligned?
#video {
display: flex;
height: 100vh;
justify-content: center;
align-items: centre; //adding 'stretch' works, but aligns text top
background: orange;
}
#text {
z-index: 1;
width: 100%;
text-align: center;
height: 100% // adding this aligns text to top
background: rgba(0, 0, 0, 0.6); // the overlay
color: #fff;
}