CSS Flexbox: Items Not Centering Vertically in a Responsive Container
I'm reviewing some code and I keep running into Quick question that's been bugging me - I'm having trouble centering items vertically within a flex container..... I'm using CSS Flexbox in a project and expected my items to center correctly, but they are not aligning as intended. Here’s a simplified version of my CSS: ```css .container { display: flex; justify-content: center; align-items: center; height: 100vh; flex-direction: column; } .item { width: 50%; padding: 20px; background-color: lightblue; margin: 10px; } ``` And here’s the HTML structure I'm working with: ```html <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> ``` I expected all three items to be centered vertically within the full height of the viewport. However, what I see is that they are exploring at the top of the container and not centered at all. I've inspected the elements in the browser, and it seems like they are respecting the flex properties, but the behavior is not as anticipated. I also tried adding `min-height: 100vh;` to `.container`, but that didn’t resolve the scenario. I checked for any overriding styles from Bootstrap, as I'm using version 5.1, but nothing seems to affect this part of the layout. Any suggestions on what could be going wrong or how to fix this? I'm working on a API that needs to handle this. Any ideas what could be causing this? I'm working in a Windows 10 environment. I'd really appreciate any guidance on this. For context: I'm using Css on Debian. Thanks for any help you can provide! What would be the recommended way to handle this?