title: How can I change the width/height of a div without changing position?
body: <p>I want to <a href="http://thuongvuho.com/circletime/" rel="nofollow">duplicate what this guy did</a> but without using canvas. I want to have a div in the center of my page and simply increment the width/height/border-radius by 10px every second. This works pretty well, but for some reason the bigger the div gets the more it moves to the lower right. The circle is not staying still, its center positioning is changing as it gets larger. How can I change the width/height of a div without changing position?</p>
  
  <p><strong>main.css</strong></p>
  
  <pre><code>div {
    background-color: green;
    width: 100px;
    height: 100px;
    border-radius: 100px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-50px; /* this is half the height of your div*/  
    margin-left:-100px; /*this is half of width of your div*/
  }
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
    &lt;head&gt;
      &lt;title&gt;CircleTime&lt;/title&gt;
      &lt;link rel="stylesheet" href="main.css"&gt;&lt;/link&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.coffee</strong></p>
  
  <pre><code>incrementCircle = -&gt;
    newSize = circle.height() + 10
    circle.height newSize
    circle.width newSize
    circle.css 'border-radius', newSize
  
  $(document).ready -&gt;
    window.circle = $("div")
    setInterval(incrementCircle, 1000);
  </code></pre>