title: Caption area div not centre aligned inside header div
body: <p>I have a header div, and inside this I have a caption div. I'm trying to centre align the caption div. Currently the caption div is aligned to the left. I might just be incredibly dim, but i've been looking at code all day, so my mind is fried.</p>
  
  <p>html</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
    &lt;div id="header"&gt;
      &lt;div class="caption"&gt;First Caption - Health &amp; Safety&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>#header {
   position:relative;
   width:1200px;
   height:400px;
   margin:auto;
   border:1px solid red;
  }
  
  .caption {
   position:absolute;
   width:1000px;
   height:140px;
   background-color: red;
   margin: auto;
  }
  </code></pre>