title: vertical align div within a div using jquery?
body: <p>Anyone have any experience with jquery vAligh plugins or similar?</p>
  
  <p>I tried to align for the following but it fails..  I was using a simple valign plugin (I will put the plugin at the end, its a jquery extension), if anyone can help it would be really helpful...</p>
  
  <pre><code>var overlayLayer = $("&lt;div id='office-location'&gt;&lt;/div&gt;").addClass('modal-overlay');
  $('body').append(overlayLayer);
  
  $('&lt;div id="content-for-overlay" style="background-color: white;"&gt;&lt;/div&gt;').appendTo(overlayLayer);
  
  this.render({ to: "content-for-overlay", partial: "office-location-modal" }); // this just copies html into the layer
  
  $('#content-for-overlay').vAlign(); THIS USES a plugin called valign but it doesn't align
  
  $("body").css("overflow", "hidden");
  $('#office-location').css("opacity", 0.8).fadeIn(150);
  $('#content-for-overlay').css("opacity", 1);
  </code></pre>
  
  <p>heres the FN extension..</p>
  
  <pre><code>(function($) {
  $.fn.vAlign = function() {
      return this.each(function(i) {
          var h = $(this).height();
          var oh = $(this).outerHeight();
          var mt = (h + (oh - h)) / 2;
          $(this).css("margin-top", "-" + mt + "px");
          $(this).css("top", "50%");
          $(this).css("position", "absolute");
      });
  };
  </code></pre>
  
  <p>})(jQuery);</p>