html - 绝对定位:之后和变换后未使其居中对齐

嗨，我不得不在轮播上创建简单的点，如下所示：



因此，我使用以下方法：

.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部分更感兴趣。有人可以解释一下吗？

附言这种绝对位置方法与transform结合一直对我有用，但是仅在这种情况下，它引起了这个问题，我不知道为什么。在FF和Chrome中都进行了检查。

最佳答案

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

当遇到这样的分数值时，看起来浏览器会四舍五入该值。我在规范中找不到关于此的任何信息（无论是向上取整还是向下取整），并且网上也没有关于此特定事物的最新文章。但是，我确实设法找到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>

关于html - 绝对定位:之后和变换后未使其居中对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38036919/