How can I align a specific flex item to the horizontal center of its parent?

Question

I have a flex container with two items. I'd like the first item to be aligned to flex-start, and the second item to be aligned to the center of the flex container. My main concern is preserving align-items: center so that all the flex items are vertically centered regardless of their height, their width, 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>

How can I get the second box (the purple one in this example) to be perfectly centered?

Answer 1

Whit this code, purple box is centered.

.container {
  display: flex;
  height: 100px;
  background-color: tomato;
  align-items: center;
}

.box {
  height: 50px;
  width: 50px;
}

.a {
  background-color: green;
}

.b {
  background-color: purple;
  /*add this*/
  position: relative;
  margin: 0 auto;
  left: -25px;
}

<div class="container">
  <div class="box a"></div>
  <div class="box b"></div>
</div>