jQuery UI Dialog not Centered

Question

I am using jQuery and I am loading content into a div, then displaying it as a dialog. However, it is not centering the dialog.

Does anyone have a solution?

Code:

function Core_Load_Register()
{
    $("body").append("<div id='Register_Popup'></div>");
    $("#Register_Popup").load("index.php?section=FrontPage&page=Register&nogui=true");
    $("#Register_Popup").dialog({
        modal: true,
        height: "auto",
        width: "auto",
        buttons: 
        {
            "Register New Account":
            function() 
            {
                
            },
            
            "Cancel":
            function()
            {
                $(this).dialog("close");
            }
        }
    });
}

Example Screenshot:

Answer 1

Since your content is dynamic try waiting for the load command to finish first.

$("#Register_Popup")
  .load("index.php?section=FrontPage&page=Register&nogui=true", 
  function()
  {
    $("#Register_Popup").dialog({ 
      modal: true, 
      height: "auto", 
      width: "auto", 
      buttons:  
      { 
        "Register New Account": 
        function()  
        { 

        }, 

        "Cancel": 
        function() 
        { 
            $(this).dialog("close"); 
        } 
      } 
  }); 
});