title: CSS - fix div to top center
body: <p>I would like to center a div inside of the header which is 100% width. The div that needs to be centered has a physical width and height. I have tried using position absolute, but when resizing the screen, the div will stay centered. I want the div to stay in the center of the design, not the screen. How do I accomplish this? I also do not want to use position fixed for this.</p>
  
  <p>css:</p>
  
  <pre><code>header{
    position: relative;
    width: 100%;
    height: 65px;
    background-color: #662D91;
  }
  #banner{
    position: absolute;
    left: 50%;
    margin-left: -240px;
    width: 480px;
    height: 115px;
    border-radius: 20px;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;header&gt;
          &lt;div id="banner"&gt;
              &lt;a href="/index"&gt;
                  &lt;img src="/_images/layout/PentaOneStop_headerLogo.png" class="img-center" /&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  </code></pre>
  
  <p>EDIT: I have solved my issue by adding a div between the full width header and the logo that is the width of the design. It appears to have fixed my problem.</p>
  
  <p>JSFiddle of my solution to my problem: <a href="http://jsfiddle.net/U3Hpa/2/" rel="nofollow">http://jsfiddle.net/U3Hpa/2/</a></p>