如何将特定弹性项目与其父级的水平中心对齐？

Question

我有一个包含两个项目的弹性容器。我希望第一个项目与flex-start对齐，第二个项目与flex容器的中心对齐。我主要担心的是保留align-items: center，以便所有弹性项目都是垂直居中的，无论它们的高度，宽度或容器的高度如何。

.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>

如何将第二个框（本例中的紫色框）完全居中？

Answer 1

使用此代码，紫色框居中。

.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>