Can't center content in child div in flex vontainer

I am trying to create a responsive layout using Flex.

But the text in my child div is getting impossible (for me) to align in the center (horizontal and vertical).

.flexContainer {      display: flex;      width: 100%;      flex-direction: column;      justify-content: center;      align-items: center;  }    .helloChild {      min-height: 100vh;      width: inherit;      background-image: linear-gradient(to right, aqua, blue);      font-size: 4vw;      font-weight: 900;      color: white;  }  

I want a layout with three divs stacked on top of each other, and each div would have its content aligned (headline text and then YouTube video embed) in the center.

Why is aligning so hard with CSS? What am I not getting?

https://stackoverflow.com/questions/67052538/cant-center-content-in-child-div-in-flex-vontainer April 12, 2021 at 12:05PM