title: jQuery .height() and .outerHeight() returning zero
body: <p>I'm trying to write a small jQuery plugin that will vertically center a div based on it's height,</p>
  
  <p>Basically in my css I have <code>top: 50%</code>, but since the height is variable I need to calculate this.</p>
  
  <p>The HTML for this looks like</p>
  
  <pre><code>&lt;div class="button-wrapper js-center" data-center="vertical" style="margin-top: 0px;"
      &lt;span class="sub-text"&gt;Multiline text with two lines&lt;/span&gt;
      &lt;a href="" class="shop-btn"&gt;Shop_&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In my plugin I tried logging the height, but it keeps on returning zero:</p>
  
  <pre><code>console.log($el);
  console.log("$el.outerHeight(): " + $el.outerHeight());
  console.log("$el[0].scrollHeight: " + $el[0].scrollHeight);
  
  // output:
  $el.outerHeight(): 0
  $el[0].scrollHeight: 0 
  </code></pre>
  
  <p>When I use dev tools to check, it looks like this:
  <img src="https://i.stack.imgur.com/eMeZe.png" alt="enter image description here"></p>
  
  <p>So I'm wondering what potentially could go wrong, for reference, this is the plugin I'm (trying) to write: <a href="http://pastebin.com/Qz7BgkcG" rel="nofollow noreferrer">http://pastebin.com/Qz7BgkcG</a></p>
  
  <p>EDIT:
  This is the main CSS that is used on the <code>.button-wrapper</code></p>
  
  <pre><code>.button-wrapper {
      width: 250px;
      left: 50%;
      top: 50%;
      margin-left: -125px;
      position: absolute;
      z-index: 100; 
  }
  </code></pre>
  
  <p>EDIT 2:
  Recreated with all css, but I'm not getting the same issue here: <a href="http://jsfiddle.net/8Etex/" rel="nofollow noreferrer">http://jsfiddle.net/8Etex/</a></p>