Having a flex container with two items, I wish to align the first item to flex-start, and the second item to the center of the flex container. I am particularly concerned about maintaining align-items: center to ensure that all flex items are vertically centered regardless of their individual dimensions or the height of their container.
.container {
display: flex;
height: 100px;
background-color: tomato;
align-items: center;
}
.box {
height: 50px;
width: 50px;
}
.a {
width: 100px;
background-color: green;
}
.b {
background-color: purple;
}<div class="container">
<div class="box a"></div>
<div class="box b"></div>
</div>What is the best approach to ensure that the second box (the purple one in this scenario) is perfectly centered?