CSS Positioning Problem

I have this javascript function that gets called after an ajax response. It contains this bit of code:

// If there is a notification already, clear it and restart with the new notification.
try {clearTimeout(timeout_handle);}
catch(err){}

$('#animated_status_message').html(
    'this is a status message'
);
$("#animated_status_message").animate({top:"0"},{duration:400})
timeout_handle = setTimeout("$('#animated_status_message').animate({top:'-60px'},{duration:400})", 4000);

This is the CSS for the div:

#animated_status_message{
    background-color: orange;
    color: black;
    font-weight: bold;
    border: 1px solid black;
    margin-top: 2px;
    padding: 20px;
    z-index: 1000;
    max-width: 80%;
    position:fixed;
    opacity:0.92;
}

And finally, the html:

<div id="animated_status_message" style="top: -60px;"></div>

The javascript is probably not necessary here but just in case.

So, the problem is that the div isn't centered. I tried a bunch of methods with margin auto and creating a parent div and adding left property to it and the the actual div holding th开发者_运维技巧e content.

Any idea how I can tie this all together?

Thanks Eric

If you know the size of the div you could try this:

#animated_status_message{
   left: 50%;
   width: 400px (just an example);
   margin-left: -200px (the width of the div divided by two);
}

With position:fixed; margin: 0 auto; won't work. I would set a fixed (or percentage) width like Tobias suggested.

Try this

// If there is a notification already, clear it and restart with the new notification.
try {clearTimeout(timeout_handle);}
catch(err){}

$('#animated_status_message').html(
    'this is a status message'
);
$("#animated_status_message").animate({top:"0px"}, 400);
timeout_handle = setTimeout(function(){
 $('#animated_status_message').animate({top:'-60px'}, 400)
}, 4000);