在div中显示错误，其中一个在其他下面

Question

我需要在页面中的一系列div中显示一些错误消息（一个，两个，n个错误）。他们需要出现水平居中并固定在顶部（即使使用滚动页面）。 我想是这样的（对于两个div现在）：

 <div id="mensagens"> 
      <div id="erros" style="display: none;">      
       <span></span>     
      </div> 
      <div id="alertas" style="display: none;">      
       <span></span>     
      </div> 
     </div> 

CSS：

#mensagens 
{ 
    position:absolute; 
    position: fixed; 
    top: 0px; 
    z-index:9999;  
} 

#alertas 
{  
    width: 700px; 
    margin-left: 350px; 
    left: 50%; 

    font-size: 100%; 
    font-weight: bold;  
    background:orange; 
    padding:6px; 

} 


#erros 
{  

    width: 700px; 
    margin-left: 350px; 
    left: 50%; 

    font-size: 100%; 
    font-weight: bold;  
    background:red; 
    padding:6px; 


} 

但这不是水平居中它。任何想法我可以做到这一点？

Answer 1

而不是使用上#erros和#alertas的margin-left和left性能，使用方法：margin-left: auto和margin-right: auto，将它们设置为从页面的左右两侧等距离，分别。

你应该可以更改您的代码如下：

#mensagens 
{ 
    position:absolute; 
    position: fixed; 
    top: 0px; 
    z-index:9999;  
}  

#alertas 
{  
    width: 700px; 
    margin-left: auto; 
    margin-right: auto; 

    font-size: 100%; 
    font-weight: bold;  
    background:orange; 
    padding:6px; 
} 


#erros 
{  
    width: 700px; 
    margin-left: auto; 
    margin-right: auto; 

    font-size: 100%; 
    font-weight: bold;  
    background:red; 
    padding:6px; 
}