问题

我正在制作carousel分页,它看起来像内部小圆圈.问题是内圆的集中,这总是有点儿在旁边.

我尝试了很多通过转型形式,边距,calc顶&左等集中的方法..

 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

我期望完全以内心为中心。

  最佳答案

甚至可见。

 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> 

  相同标签的其他问题

css