title: Why does positioning absolute elements to the left center the child?
body: <p>This is nothing more than a request for someone to explain the logic behind these few CSS lines. I'm making a timeline for a website but am confused on why this code works.</p>
  <p>I have a class <code>timeline_circle</code> that is <code>positioned absolute</code> to timeline_center. In the timeline_circle class, I move it <code>left:50;</code> and <code>transform: translateX(-50%);</code> which centers the timeline_circle. I can't wrap my head around why this works.</p>
  <p><strong>Full code</strong></p>
  <pre><code>.timeline_center{
      background-color: var(--darkGrey);
      width: 0.5vw;
  
      border-radius: 1vh;
      justify-self: center;
      grid-area: timeline;
  
      position: relative;
  }
  
  .timeline_circle{
      width: 2vw;
      height: 2vw;
  
      border-radius: 1vw;
      background-color: var(--oceanBlue);
  
      position: absolute; 
      left: 50%;
      transform: translateX(-50%);
  }
  </code></pre>
  <p><strong>Centered Circle in timeline</strong>
  <a href="https://i.stack.imgur.com/TWGfd.png" rel="nofollow noreferrer">Image Link</a></p>