title: Span position absolute is not centered with top and left
body: <p>I want to create a "X" with css spans and position absolute, but the spans aren't centered even if they should.</p>
  
  <p>The container has the <code>font-size</code> of <code>1px</code>. and a <code>height</code> and <code>width</code> of <code>100em</code>. Therefore I can use <code>1em</code> as 1% of the parents size.</p>
  
  <p>I used <code>transform-origin: 0px 5em;</code> on the span, to rotate it without changing the starting point. The Element starts in 20% <code>top</code> and <code>left</code> (20em) and ends in <code>80%</code> (top and left).</p>
  
  <p>To get the required <code>width</code> i simply calculated: <code>Square root( square of (60) * 2)</code> (Pythagorean theorem) (60 because start and end 20 -- 100-20*2)</p>
  
  <p>But for some reason the X is clearly not centered. Do you know what i did wrong?</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>body
  {
      margin: 0px;
  }
  .check
  {
      font-size: 1px;
      position: relative;
      height: 100em;
      width: 100em;
      background-color: white;
      border-radius: 50%;
      transition: .3s;
      box-shadow: 0px 0px 10px red inset;
  }
  
  
  
  .check span
  {
      position: absolute;
      display: block;
      height: 10em;
      width: 0px;
      background-color: #00FF00;
      transition:.3s;
  }
  .check.red span
  {
      background-color: #FF0000;
      transform-origin: 0px 5em;
      transform: rotate(45deg);
      top: 20em;
      left: 20em;
  }
  .check.red span:nth-of-type(2)
  {
      transform: rotate(135deg);
      top: 20em;
      left: 80em;
  }
  
  
  
  
  
  .check.red:hover span
  {
      width: 84.852813742em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;div class="check red"&gt;
          &lt;span&gt;&lt;/span&gt;
          &lt;span&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>