How do I make jQuery-UI datepicker show up in the center of my screen?

Question

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.

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.

Here's the inline code generated:

<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; ">

Here is a jQuery function to center a div on the screen:

//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;
}

Which is called by by: $('.ui-datepicker').center();

What would be the code to use this function to center the .ui-datepicker div on the center of the screen?

EDIT: here's the website: http://univiaje.spin-demo.com/

• click on one of the links below the red background in the sidebar, a window should open
• click on the calendar icon
• fail :(

Answer 1

HTML, CSS solution

HTML:

<div id="datepicker-container">
  <div id="datepicker-center">
    <div id="datepicker"></div>
  </div>
</div>

CSS:

#datepicker-container{
  text-align:center;
}
#datepicker-center{
  display:inline-block;
  margin:0 auto;
}