无法在弹性容器内对齐具有静态 px 宽度的项目

Question

这很有趣，为什么我不能在 flex 容器内对齐具有静态 px 宽度的项目。如果我不给子块 100% 的静态宽度，它们将在父块的中心居中。但是当我使用 100ps 的宽度时，子块被移动到起始位置。

.wrapper {
 display: flex;
 justify-content: space-around;
}
.item {
  width: 20%;
}
.item__inner {
  width: 100px;   /* Beacuse of the static width I can't align the inner items inside the item wrapper .item*/
  height: 100px;
  border-radius: 50%;
  background: red;
}

<div class="wrapper">
  <div class="item">
    <div class="item__inner">
    </div>
  </div>
  <div class="item">
  </div>
</div>