title: animate a div and expand from center
body: <p>I have a simple code that expands a div horizontal and vertically from center,
  but it only expands to the left or to the bottom, I want it expands to both side(left=50px, right=50px) or (top=50px, bottom=50px) from center with total equal to 100px.
  here the code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;style&gt;
      div {
      background-color:#bca;
      background: #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      background-repeat: no-repeat;
      background-position: center center;
      border:1px solid green;
      padding:10px;
  }
    &lt;/style&gt;
    &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;button id="go"&gt;&amp;raquo; Run&lt;/button&gt;
  
  &lt;div id="block"&gt;Hello!&lt;/div&gt;
  &lt;script&gt;
  
  
  $("#go").click(function(){
    $("#block").animate({
      width: "100px",
      height: "100px",
      opacity: 0.6,
    }, 1500 );
  });
  &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>Thank you.</p>