Centering Div in middle of page doesn't work until seciond time displayed

[osogovo]

I am currently working on an HTML/CSS/Javascript. I have a div id called message and a javascript function which shows the message and after so many seconds calls another function to hide it. This is all pretty much working, except the first time the showMessage function is called the message div is pushed slightly to the right (very noticeably not in the center of the screen), then after 5 seconds the hideMessage run and hides the div message. If I then call the showMessage function again the div is correctly centered in the middle of the screen. The css for the id message is only got \[code\]display: none;\[/code\]. Below is the css for the messageError class that the showMessage function adds before it shows the div. \[code\].messageError{ position: absolute; top: -48px; width: auto; margin-left: auto; margin-right: auto; text-align: center; background-color: #ff3d3d; border: #c10000 solid thin; border-radius: 5px; color: white; font-weight: bold;}\[/code\]Below is the code that the javascript uses\[code\]function showMessage(persistent, message, type){ $('#message').css({ position:'absolute', padding: '10px', left: ($(window).width() - $('#message').outerWidth())/2 }); $("#message") .hide() .html(message); if (type == "error") { $("#message").addClass("messageError"); } else if (type == "workingComplete") { $("#message").addClass("messageWorkingComplete"); } $("#message").fadeIn("slow"); if (!persistent) { setTimeout("hideMessage()", 5000); }}function hideMessage(){ $("#message") .fadeOut("slow"); removeClass("messageError") .removeClass("messageWorkingComplete")}\[/code\]How can I make it so that the div is in the middle first time without needing to close and reload to make it appear in the middle.Thanks for any help you can provide.