javascript - jQuery .height() and .outerHeight() returning zero -

i'm trying write small jquery plugin vertically center div based on it's height,

basically in css have top: 50%, since height variable need calculate this.

the html looks like

<div class="button-wrapper js-center" data-center="vertical" style="margin-top: 0px;"     <span class="sub-text">multiline text 2 lines</span>     <a href="" class="shop-btn">shop_</a> </div> 

in plugin tried logging height, keeps on returning zero:

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  

when use dev tools check, looks this:

so i'm wondering potentially go wrong, reference, plugin i'm (trying) write: http://pastebin.com/qz7bgkcg

edit: main css used on .button-wrapper

.button-wrapper {     width: 250px;     left: 50%;     top: 50%;     margin-left: -125px;     position: absolute;     z-index: 100;  } 

edit 2: recreated css, i'm not getting same issue here: http://jsfiddle.net/8etex/

i wonder if issue because jquery's .height() method returns element's computed height rather actual box model (ref: api documentation).

if @ element you've created in jsfiddle above, you'll see firefox doesn't recognise computed height absolute-positioned element. means return zero. if force height attribute on element in css example, computed dimensions updated , can retrieve value.