jQuery UI problem centering a dialog

Question

I've got a jQuery dialog box that does display and respond to button clicks correctly. Unfortunately it's always positioned at 0, 0 in the browser window despite my attempts to convince it otherwise. Any ideas?

    var $dialog = $('<div></div>')
  .html('my message')
        .dialog({ autoOpen: false, title: 'my title', position: 'center', bgiframe: true
        });

    $dialog.dialog('option', 'buttons', buttons);
    $dialog.dialog('option', 'position', "center");
    $dialog.dialog("open");

Answer 1

If it isn't automatically centering, then you have an error in your document markup (a missing closing tag is typically the culprit).

http://jsbin.com/uhago4/edit

Answer 2

jQuery uses the width of the dialog to center it. If it has not been displayed yet, appended to the DOM, or created with a fixed width, then it has no width and can't be centered properly.

To fix, just center after opening:

var $dialog = $('<div></div>')
.html('my message')
.dialog({ autoOpen: false, title: 'my title', position: 'center', bgiframe: true
  });

$dialog.dialog('option', 'buttons', buttons);
$dialog.dialog("open");
$dialog.dialog('option', 'position', "center");