Jquery Browser Resize center Div even on scroll
<p>I have this code... </p>

<pre><code>&lt;style type="text/css"&gt;
#container {
  width: 200px;
  height: 200px;
  background-color: #567;
}
&lt;/style&gt;

&lt;div id="container"&gt;
  My center div...
&lt;/div&gt;


&lt;script type="text/javascript"&gt;
$(window).resize(function(){
  $('#container').css({
    position:'absolute',
    left: ($(window).width() - $('#container').outerWidth())/2,
    top: ($(window).height() - $('#container').outerHeight())/2
  });
});

// To initially run the function:
$(window).resize();
&lt;/script&gt;
</code></pre>

<p>This works great except if I scroll to the bottom of the page it will not center the DIV in the middle of the browser screen based on the new coordinates of where I am at in the position of the page. So my question is, if I click to open this DIV, what can I do to center the DIV if I am scrolled to the bottom of a long page?</p>
