Question

我正在进行轮播分页，它看起来应该像是带有小圆圈的圆圈。问题在于内圆的中心，而内圆总是在侧面一点。

我尝试了许多通过变形，边距，顶部和左侧计算等方法进行居中的方法。

div {
  height: 13px;
  width: 13px;
  border: 1px solid black;
  border-radius: 50%;
  position: relative;
}

div::after {
  content: "";
  width: 8px;
  height: 8px;
  background-color: red;
  position: absolute;
  top: calc(50% - (8px / 2));
  left: calc(50% - (8px / 2));
  border-radius: 50%;
}

<div></div>

FIDDLE

我希望内圆完全居中。

Answer 1

使像素为偶数以正确居中，如下所示：

div {
  height: 14px;
  width: 14px;
  border: 1px solid black;
  border-radius: 50%;
  position: relative;
}

Answer 2

像这样改变

 div {
      height: 16px;
      width: 16px;
      border: 1px solid black;
      border-radius: 100%;
      position: relative;
    }

div::after {
  content: "";
  width: 8px;
  height: 8px;
  background-color: red;
  position: absolute;
  top: calc(50% - (8px / 2));
  left: calc(50% - (8px / 2));
  border-radius: 50%;
}

Answer 3

甚至可以整除。

div {
  height: 12px;
  width: 12px;
  border: 1px solid black;
  border-radius: 50%;
  position: relative;
}

div::after {
  content: "";
  width: 6px;
  height: 6px;
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

<div></div>

将小元素居中放置在另一个元素中

3 个答案: