title: How do I make jQuery-UI datepicker show up in the center of my screen?
body: <p>Right now the datepicker's position is determined via inline css that is being added by javascript via the jQuery-UI framework. I'd love to have the datepicker in the center of the screen instead of being located based on where my trigger is.</p>
  
  <p>How do I override this positioning being generated by jQuery with something of my own? I even have a jQuery script to center a div in the center of a screen but it's still not working due to the script being overwritten by jquery-ui's.</p>
  
  <p>Here's the inline code generated:</p>
  
  <pre><code>&lt;div id="ui-datepicker-div" class="ui-datepicker 
    ui-widget ui-widget-content ui-helper-  clearfix ui-corner-all 
    ui-datepicker-multi ui-datepicker-multi-2" style="width: 34em; 
    position: absolute; left: 349px; top: 453px; z-index: 1; display: block; "&gt;
  </code></pre>
  
  <p>Here is a jQuery function to center a div on the screen:</p>
  
  <pre><code>//center div on screen
  jQuery.fn.center = function () {
      this.css("position","absolute");
      this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
      this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
      return this;
  }
  </code></pre>
  
  <p>Which is called by by: <code>$('.ui-datepicker').center();</code></p>
  
  <p>What would be the code to use this function to center the <code>.ui-datepicker</code> div on the center of the screen?</p>
  
  <p><BR><BR>
  <strong>EDIT:</strong> here's the website: <a href="http://univiaje.spin-demo.com/" rel="noreferrer">http://univiaje.spin-demo.com/</a></p>
  
  <ul>
  <li>click on one of the links below the red background in the sidebar, a window should open</li>
  <li>click on the calendar icon</li>
  <li><strong>fail :(</strong></li>
  </ul>