title: jQuery wrong outerWidth() and outerHeight() after resize()
body: <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="element"&gt;
      &lt;p&gt;I want to center this element vertically and horizontally.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.element
  {
      background: #eee;
      border: 1px solid #ccc;
      font-size: 24px;
      margin: 10px;
      padding: 20px;
      position: absolute;
  }
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>jQuery(document).ready(function($) {
      var $element = $('.element');
  
      center();
  
      $(window).on('resize', function() {
          center();
      });
  
      function center() {
          var width = $element.outerWidth(true);
          var height = $element.outerHeight(true);
  
          console.log(width);
          console.log(height);
  
          $element
              .stop(true)
              .animate({
                  top: Math.max(0, ($(window).height() - height) / 2),
                  left: Math.max(0, ($(window).width() - width) / 2)
              });
      }
  });
  </code></pre>
  
  <p><strong>The Problem</strong></p>
  
  <p>If I resize the window, the element isn’t centered because the outerWidth() and outerHeight() are wrong.</p>
  
  <p>The problem disappears after refresh.</p>
  
  <p><strong>Test Results on Firefox</strong></p>
  
  <p>Default: Element Size - 670x134 (good)</p>
  
  <p>768x1024: Element Size - 198x254 (wrong) - 670x134 (good after refresh)</p>
  
  <p>360x640: Element Size - 198x254 (wrong) - 360x182 (good after refresh)</p>
  
  <p><strong>Question</strong></p>
  
  <p>Any idea why this problem occurs and how to fix it?</p>
  
  <p><strong>Notes</strong></p>
  
  <p>I don’t want the element to have a fixed width or height.</p>