title: jQuery: Animating width/height, but Stay Centered
body: <p>I have an element on the page that I've already centered horizontally and vertically (It's a jQuery UI Modal Dialog), and want to resize it using .animate() like this:</p>
  
  <pre><code>&lt;div id="element" style="width: 100px; height: 100px;"&gt;
      Hi Stack Overflow!
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      $('#element').animate({ height: "200px" });
  &lt;/script&gt;
  </code></pre>
  
  <p>That works fine, except the element only grows downwards. What I'm trying to do is have the element grow vertically in both directions (in this case 50px in each direction) so it stays centered. Is there a way that it can be done?</p>