绝对定位：在转换后不将其对齐在中心

Question

嘿伙计们我必须像这样在旋转木马上创建简单的点：

因此我使用了以下方法：

.banner-nav-dots > li > a {
    position: relative;
}

.banner-nav-dots > li.active > a:after {
    content: '';
    background: #6e2c91;
    height: 5px;
    width: 5px;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    border-radius: 50%;
}

现在应该确实以点为中心，但在 THIS LINK 上可以看到，它们并不完全在中心对齐。为什么？他们为什么不在中心对齐？

以下是MVCE ：

.circle {
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  border: 2px solid #6e2c91;
  border-radius: 50%;
  height: 15px;
  width: 15px;
}
.circle:after {
  position: absolute;
  content: '';
  display: inline-block;
  height: 5px;
  width: 5px;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background: #6e2c91;
  transform: translate(-50%, -50%);
}

<div class='circle odd-numbered'></div>

我对 WHY 部分更感兴趣。有人可以解释一下吗？

P.S。这个绝对位置方法结合变换一直对我有用，但就这个实例而言，它引起了这个问题，我不知道为什么。在FF和Chrome中都检查过。

Answer 1

问题似乎是由于父容器（height: 15px，width: 15px）的 奇数维 的组合和 50％的儿童定位属性值 （top: 50%，left: 50%）。这意味着左侧和顶部的 实际计算值将 5.5px（（15px - 4px）/ 2）（15px - 4px也归因于box-sizing: border-box被应用于父母）。

当遇到这样的小数值时，看起来浏览器会对值进行四舍五入。我在规范中找不到任何相关信息（无论是圆形还是向下），网上最近还有很多关于这个特定内容的文章。但是，我确实找到了this old article，它说每个浏览器对它们的处理方式不同。有些围绕它倒下而有些围绕它。无论哪种方式，子元素都不会到达确切的中心。

此案例的修正似乎是为父级维度设置偶数值。

＆＃13;

＆＃13;

.circle {
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  border: 2px solid #6e2c91;
  border-radius: 50%;
}
.odd-numbered {
  height: 15px;
  width: 15px;
}
.even-numbered {
  height: 16px;
  width: 16px;
}
.circle:after {
  position: absolute;
  content: '';
  display: inline-block;
  height: 5px;
  width: 5px;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background: #6e2c91;
  transform: translate(-50%, -50%);
}

＆＃13;

<h4>Odd Numbered Dimensions - PROBLEM </h4>

<div class='circle odd-numbered'></div>

<h4>Even  Numbered Dimensions - NO PROBLEM </h4>

<div class='circle even-numbered'></div>

＆＃13;

＆＃13;

＆＃13;