jQuery UI dialog box not aligning correctly

Question

In jQuery I call a few dialog boxes in sequence to create a wizard. Despite setting the position to position: ["center", "center"], the dialogs align to left center.

The wizard starts by calling getMoreParams(0). There are 7 divs in the HTML spanning moreParams[0-7].

Please let me know if more detail is required. See video here.

Code is:

 function getMoreParams(divNumber) {
        $("#moreParams" + divNumber).addClass("isWizard");
        $("#moreParams" + divNumber).dialog({
            title: "Designing wizard",
            width: "300px",
            resizable: false,
            position: ["center", "center"]
        });
        if (divNumber == 0) {
            $("#moreParams" + divNumber).dialog({
                modal: true,
                position: ["center", "center"],
                buttons: {
                    "Let's get started": function() {
                        getMoreParams(divNumber + 1);
                        $(this).dialog("close");
                    }
                }
            });
        }
        if (divNumber == 1) {
            $("#moreParams" + divNumber).dialog({
                modal: true,
                position: ["center", "center"],
                buttons: {
                    "Next": function() {
                        getMoreParams(divNumber + 1);
                        $(this).dialog("close");
                    }
                }
            });
        }
        if (divNumber > 1 && divNumber < 6) {
            $("#moreParams" + divNumber).dialog({
                modal: true,
                position: ["center", "center"],
                buttons: {
                    "Next": function() {
                        getMoreParams(divNumber + 1);
                        $(this).dialog("close");
                    },
                    "Previous": function() {
                        getMoreParams(divNumber - 1);
                        $(this).dialog("close");
                    }
                }
            });
        }
        if (divNumber == 6) {
            $("#moreParams" + divNumber).dialog({
                modal: true,
                position: ["center", "center"],
                buttons: {
                    "Save": function() {
                        $(this).dialog("close");
                        lastStep();
                    },
                    "Previous": function() {
                        getMoreParams(divNumber - 1);
                        $(this).dialog("close");
                    }
                }
            });
        } 
}