css - 当外部div具有奇数宽度和高度时如何居中对齐项目

Question

如何处理以下问题：外部 div 的宽度为奇数，而内部 div 的宽度为偶数。所以，我在第一组盒子上努力工作，以水平和垂直对齐中心，并意识到宽度是问题所在。我想也许我们不能使用0.5px. 但为什么它在那里。也许我错过了一些东西。我不知道请帮助我理解这两种情况。

.parent {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.outter {
  height: 45px;
  width: 45px;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.inner {
  height: 30px;
  width: 30px;
  background: blue;
  border-radius: 50%;
  border: 2px white solid;
}

.outter2 {
  height: 45px;
  width: 45px;
  background: red;
  border-radius: 50%;
}

.inner2 {
  height: 30px;
  width: 30px;
  background: blue;
  border-radius: 50%;
  border: 2px white solid;
  margin: auto;
  margin-top: 6.5px;
}

.parent2 {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin-top: 40px;
}

.outter3 {
  height: 46px;
  width: 46px;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.inner3 {
  height: 30px;
  width: 30px;
  background: blue;
  border-radius: 50%;
  border: 2px white solid;
}

.outter4 {
  height: 46px;
  width: 46px;
  background: red;
  border-radius: 50%;
}

.inner4 {
  height: 30px;
  width: 30px;
  background: blue;
  border-radius: 50%;
  border: 2px white solid;
  margin: auto;
  margin-top: 7px;
}

<h3>Why these are not centered</h3>
<div class="parent">
  <div class="outter">
    <div class="inner"></div>
  </div>

  <div class="outter2">
    <div class="inner2"></div>
  </div>
</div>
<h3>Why these are centered</h3>
<div class="parent2">
  <div class="outter3">
    <div class="inner3"></div>
  </div>

  <div class="outter4">
    <div class="inner4"></div>
  </div>
</div>

标签： css