JQuery dialog not showing up in center of window

Question

I am using JQuery1.7.1, and JQuery UI 1.8.20 libraries I have also included jquery.ui.position.js in the same bundle.

However, the dialog box is not showing up in center of screen. It is showing at left:0 in IE 8, and loading up at random position on Chrome/FF I haven't specified any styling.

$("#dialog").dialog({ modal: true, autoOpen: false, height: 'auto', width: 'auto', resizable: false });
$("#dialog").dialog("open");            
$("#dialog").dialog("option", "title", $('#dialog').attr('data-dialog-title'));

Any idea of what could be wrong here?

Solution

If you want to align center the dialog box:

$("#dialog").position({
   my: "center",
   at: "center",
   of: window
});

Try if this would work..Refer the docs here