title: CSS - align center
body: <p>I'm finally trying to do away with tables and use CSS.</p>
  
  <p>I have 3 DIVs that make up a three layered layout: header, body and footer. I'm now trying to overlay a 900px wide DIV on top of these layers, center aligned, which will hold some of my content and navigational buttons.</p>
  
  <p>These are the 3 layers:</p>
  
  <p><img src="https://i.stack.imgur.com/3u7yQ.png" alt="enter image description here"></p>
  
  <p>And this (done in Photoshop), is what I am trying to achieve but transparent to the eye:</p>
  
  <p><img src="https://i.stack.imgur.com/rmo6W.png" alt="enter image description here"></p>
  
  <p>My 3 base layers are coded like this:</p>
  
  <pre><code>&lt;div id="main" style="width:100%; z-index:1; position:relative;"&gt;
      &lt;div id="header" style="width:100%; height:175px; text-align:center; background:#151515; z-index:1;"&gt;&lt;/div&gt;
      &lt;div id="contents" style="width:100%; height:400px; position:relative; background:#FFF; z-index:1;"&gt;&lt;/div&gt;
      &lt;div id="footer" style="width:100%; height:200px; position:relative; background:#151515; z-index:1;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I did manage to get a new layer to sit on top but it wasn't center aligned. Could somebody please point me in the right direction?</p>