title: Centering small element inside another element
body: <p>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.</p>
  
  <p>I've tried a lot ways of centring via tranforms, margins, calc top &amp; left etc..</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/hoxzp75g/1/" rel="nofollow noreferrer">FIDDLE</a></p>
  
  <p>I expect fully centered inner circle.</p>