title: Center a circle on a line
body: <p>I would like to center a circle on a line, like this:</p>
  
  <p><a href="https://i.stack.imgur.com/pfPjF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pfPjF.png" alt="enter image description here"></a></p>
  
  <p>I've got the following code:</p>
  
  <pre><code>.circle {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  position: absolute;
  left: 76%;
  top: 41px;
  background-color: #000;
  }
  
  .box {
  width:500px;
  height:150px;
  position: relative;
  border: 1px solid #eee;
  
  .left {
  width:200px;
  height:100%;
  position:relative;
  }
  
  &lt;div class="Box"&gt;
      &lt;div class="Left"&gt;
         &lt;div class="circle"&gt;
  
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="Right"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, when i resize the windows, it ends up like this:</p>
  
  <p><a href="https://i.stack.imgur.com/LGqVE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LGqVE.png" alt="enter image description here"></a></p>
  
  <p>How can i make sure the circle stays in place, even when i resize my window?</p>