Centering small element inside another element

Question

I'm making carousel pagination, which should looks like circle with small circle inside. The problem is centring of inner circle, which is always just a little bit on the side.

I've tried a lot ways of centring via tranforms, margins, calc top & left etc..

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

I expect fully centered inner circle.

Answer 1

Make your pixels a even numbers to centering correctly like this:

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