0

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

JSFiddle example

Daniel
  • 105
  • 7
  • keep the height:100% and then you have a classic centring issue inside the #text div – Temani Afif Jun 01 '20 at 21:11
  • aligning to the middle via normal flexbox is not the issue – I am trying to align the inner div which has a 100% height opaque overlay – this causes an issue with the text always aligning to the top. – Daniel Jun 01 '20 at 21:22
  • 1
    you align the text inside that div, keep the height:100% and now you center what is inside (using flexbox or any other trick) – Temani Afif Jun 01 '20 at 21:24
  • Ahh thank you – I get what you mean now, yeah that's got it, so simple. – Daniel Jun 01 '20 at 21:28

0 Answers0