centering a popup

I am using javascript to pop up a progress message from a control on the ribbon. Functionally it works but the popup is meant to be a fixed size and centered. When it pops up it is full width and at the top of the screen below the ribbon.

So;

1. available to the form I have the jQuery library
2. In the form onload I call the following function

	function StartDocument() {
		var DivBody='';
		DivBody = DivBody + '<style>';
		DivBody = DivBody + '.notification { width:100px; height:100px; background-color: #eeeeee; border:2px solid black; ; top:0; bottom:0; left:0; right: 0; margin:auto; }';
		DivBody = DivBody + '.notificationmessage { text-align:center; }';
		DivBody = DivBody + '</style>';
		DivBody = DivBody + '<div id="notification" class="notification"><div id="notificationmessage" class="notificationmessage"></div><div><button onClick="javascript:CloseNotification();">Done</button></div></div>';
		$(document.body).append(DivBody);
		$('#notification').toggle(false);
	}

which adds a div to use as a notification window. Attached to my ribbon button I have code which ultimately comes down to ...

function SingleCaseEvent(action, lrid) {
        var caseaction = {};
        caseaction.qubic_name = "Case action " + action;

        var ConfirmMessage = "";

        if (action == "AcceptJob") {
            Notify("Accepting job");
            caseaction.servicemodule_caseaction = { Value: 136140000 }; // Acceptjob
            ConfirmMessage = "Job accepted";
        }
        //Set a picklist value - klunky should not have to hard code these numbers here!
        if (action == "escalate") {
            caseaction.servicemodule_caseaction = { Value: 136140003 }; // escalate
            ConfirmMessage = "The job has been escalated. Ownership of the job remains with the assigned engineer but escaaltion has been requested.";
        }
        // set a lookup here
        lrid = lrid.substring(1, lrid.length - 1);
        // this works but it creates a link with no display name. Even explicitly setting the name field here does not
        // update the displayed name.
        caseaction.servicemodule_case = { Id: lrid, LogicalName: "incident", Name: "Case" }; // will that work?

        //Create the object
        SDK.REST.createRecord(
            caseaction,
            "servicemodule_casehistory",
            function (caseaction) {
                if (ConfirmMessage != "") {
                     Notify(ConfirmMessage);
                }
                debugMessage(JSON.stringify(caseaction, null, 4));
                debugMessage("The case history named \"" + caseaction.Name + "\" was created with the Id : \"" + caseaction.qubic_servicemodule_casehistoryid + "\".");
            },
            errorHandler
        );
}

Notify calls;

	function Notify(msg) {
		$('#notificationmessage').html(msg);
		$('#notification').toggle(true);
	}

All of which works quite well and puts up my own custom div so that users have some progress notification. The question is why it the width and position control ignored?