CSS定位问题

Question

我有一个在ajax响应之后调用的javascript函数。它包含以下代码：

// 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);

这是div的CSS：

#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;
}

最后是html：

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

javascript在这里可能不是必需的，但只是以防万一。

所以，问题是div没有居中。我尝试了一系列方法，使用自动边距，创建一个父div，并向其添加left属性和实际包含内容的div。

你知道我怎么才能把这一切联系起来吗？

谢谢埃里克

Answer 1

如果你知道div的大小，你可以尝试这样做：

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

Answer 2

使用position:fixed;时，margin: 0 auto;将不起作用。我会像Tobias建议的那样设置一个固定(或百分比)的宽度。

Answer 3

尝尝这个

// 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);