Jquery's height() method is not returning the correct height of the div on rendering for the first time

Question

I am working on adapt e-learning framework and I am trying to center align the notify-popup(div) vertically. For this I set top margin through js which requires the height of notify-popup, so I get its height using $('.notify-popup').height(true). First time when its loaded it returns height "x" but if I call the function again without reloading the page then it returns new height with 16px added to it "x+16". To include all the paddings and margins I used outerHeight(true) but its also not working. Does jquery's height() method excludes or miss something in the calculation of height during pre rendering of the page? It returns correct height on calling resetNotifySize function after initial rendering of the page.

setupEventListener: function() {
  this.listenTo(Adapt, 'device:resize', this.resetNotifySize);
}

showNotifyOnPageLoaded: function() {
  this.resizeNotify();
}

resizeNotify: function() {
  var notifyHeight = this.$('.notify-popup').outerHeight(true);
  this.$('.notify-popup').css({
    'margin-top': (-(notifyHeight / 2))
  });
}

resetNotifySize: function() {
  console.log('resizeNotify called through resetNotifySize');
  this.resizeNotify();
}