在全屏幕背景中對齊內容？

Question

我正在使用this tutorial創建全屏幕背景。我想讓我的內容div坐在屏幕中間。當您調整窗口大小時，應該隨窗口移動，但保持在中心位置。我通常通過使用margin: 0 auto 0 auto;來實現這一點。但在這種情況下，由於全屏幕背景，它坐在左上角。

如何將內容div居中並具有自動的左右邊距？

CSS：

 * { 
      margin:0; 
      } 

     html, body { 
      height:100%; 
      } 

     .clear { 
      clear:both; 
      } 

     body { 
      font-size: 62.5%; /* Resets 1em to 10px */ 
      background-repeat:repeat-x; 
      background-image: url('images/background-repeat.jpg'); 
      margin:0px; 
      } 

     #body { 
      width:1000px; 
      margin:0 auto 0 auto; 
      }   

#content { 
    background-image:url('images/william-corbett-content-repeat.png'); 
    background-repeat:repeat-x repeat-y; 
    width:1000px; 
    min-height:500px; 
    } 

     .fullBg { 
      position: absolute; 
      top: 0; 
      left: 0; 
      overflow: hidden; 
     } 

     #maincontent { 
      position: absolute; 
      top: 0; 
      left: 0; 
      z-index: 50; 
     } 

HTML：

<div class="wrapper"> 
    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/bg1.jpg" alt="" id="background"> 
    <div id="maincontent"> 
     <div id="body"> 
      <div id="content"></div> 
     </div>  
    </div> 
    <div id="footer"> 
     <p><a href="/home" title="Home">Home</a> | <a href="/about" title="About">About</a></p> 
    </div> 
</div> 

Answer 1

您需要添加寬度：100％;到#maincontent類

#maincontent { 
position: absolute; 
top: 0; 
left: 0; 
z-index: 50; 
width: 100%; 
}