title: How to create a fixed width circle with css which is center aligned and cut at the edges?
body: <p>How to create a circle like the following: 
  <a href="https://i.stack.imgur.com/u4eou.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u4eou.jpg" alt="this is the image"></a></p>
  
  <p>which should keep the text inside centrally aligned.</p>
  
  <p>So far what I have tried is:</p>
  
  <p>Created a circle like this and given the left margin as negative and calculating it. But I am failing to keep the circle in cut at the two ends and center aligned. The circle should be of fixed width and while resizing it should get cut equally from left and right.</p>
  
  <pre><code>.circle {
    -moz-border-radius: 550px/550px;
    -webkit-border-radius: 550px 550px;
    border-radius: 550px/550px;
    width: 550px;
    height: 550px;
    overflow: hidden;
    transition: all 1s ease-out;
    margin-top: 90px;
    margin-left: calc((100% - 515px)/2);
  }
  </code></pre>