title: How to auto center an img inside a div regardless of browser window size?
body: <p>I have a html document structured with a header, content, and footer divs. I am trying to center an image (a logo) inside my header div to display at the top of my webpage in the middle. I can absolute position it into the middle, but when I change the browser size, the img doesn't move along with it. I want it to be place automatically in the center of the window. I am stumped..?</p>
  
  <p>I have tried , margin-right:auto; margin-left:auto. I have also tried the trick where you make margin-left negative half the width and top 50%, but nothing has worked so far.</p>
  
  <p>html:</p>
  
  <pre><code>    &lt;body&gt;
  &lt;div id="container"&gt;
  
  &lt;div id="header"&gt;
      &lt;img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png"&gt;
  &lt;/div&gt;
  /*...(body div)
  ...(footer div)*/
  &lt;/div&gt; /*container*/
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#header {
  
      background-color:transparent;
      height:260px;
      width:100%
  }
  
  
  #logo-img{
  display: block;
      margin-left: auto;
      margin-right: auto;
  }
  </code></pre>
  
  <p>Also, Do I even need a container? Not sure if I need javascript for this, or if it can be accomplished with just html/css? Hope someone can help, thanks!</p>