title: How to keep a floating div centered on window resize (jQuery/CSS)
body: <p>Is there a way (without binding to the window.resize event) to force a floating DIV to re-center itself when the browser window is resized?</p>
  
  <p>To help explain, I imagine the pseudocode would look something like:</p>
  
  <pre><code>div.left = 50% - (div.width / 2)
  div.top = 50% - (div.height / 2)
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>My query having been answered below, I wanted to post the final outcome of my quest - a jQuery extension method allowing you to center any block element - hope it helps someone else too.</p>
  
  <pre><code>jQuery.fn.center = function() {
      var container = $(window);
      var top = -this.height() / 2;
      var left = -this.width() / 2;
      return this.css('position', 'absolute').css({ 'margin-left': left + 'px', 'margin-top': top + 'px', 'left': '50%', 'top': '50%' });
  }
  </code></pre>
  
  <p>Usage:</p>
  
  <pre><code>$('#mydiv').center();
  </code></pre>