CSS Centering with Transform : <p>why does centering with transform translate and left 50% center perfectly (with position relative parent) but not right 50%? </p>

<p>Working example:</p>

<pre><code>span[class^="icon"] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 }
</code></pre>

<p>Example that doesn't center:</p>

<pre><code>span[class^="icon"] {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
 }
</code></pre>
