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