绝对定位：之后并对其进行转换而不是将其居中对齐

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，它表示每个浏览器对它们的处理方式不同。有些人将其四舍五入，而另一些人将其四舍五入。无论哪种方式，子元素都不会位于确切的中心。

这种情况的解决办法似乎是为父维度设置一个偶数值。

.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%);
}

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

绝对定位：之后并对其进行转换而不是将其居中对齐

Absolute positioning :after and transforming it not aligning it in center

html

css

vertical-alignment