title: Positioning div in center css
body: <p>I'm trying to add a div block so that it's at the center of the screen. All i have is a fixed background image and it's doing some odd stuff.</p>
  
  <p>CSS:</p>
  
  <pre><code>body {               
      margin:0;
      padding:0;
  }
  
  #middle {       &lt;--- the white div block
      background-color:#FFF;
      display:block;
      width:750px;
      height:750px;
      margin:0 auto 0 auto;
      margin-top:15px;
      position:relative;
      overflow:hidden;
  }
  
  #bigbg {                &lt;-- background image
      height:auto;
      width:100%;
      z-index:-100;
      min-height:100%;
      min-width:100%;
      margin-left:0%;
      position:fixed;
      margin-top:0px;
  }
  </code></pre>
  
  <p>html: </p>
  
  <pre><code>&lt;div id='middle'&gt;
  &lt;/div&gt;
  &lt;img src="images/backgroundmain.jpg" id="bigbg"&gt;
  </code></pre>
  
  <p>Looks like this:
  <img src="https://i.stack.imgur.com/7BFGG.jpg" alt="looks like this"></p>
  
  <p>i want the white div block to be centered in the middle. Is there a better way of applying a background image? I was able to achieve what i wanted by adding the <code>background-image:url</code> property to the html, but i wasn't able to add all the properties i wanted such as fixed margins/width etc..</p>