title: Image in the middle between header and footer - CSS
body: <p>I want to built a simple landing page with a header,footer and an image - exactly between the header and the footer (horizontally/vertically centered).</p>
  
  <p>The space between the header/footer and the image should be the same and should depend from the height of the browser-window.</p>
  
  <p>The image has a fixed width (900px) and a fixed hight (600px).</p>
  
  <p>Aw: it is a sticky footer</p>
  
  <p>I have tried something like this:</p>
  
  <pre><code>{display:block; padding:0 40px; width:900px; margin:0 auto; vertical-align:middle;}
  </code></pre>
  
  <p>my html:    </p>
  
  <pre><code>     &lt;div class="fbg"&gt;
  &lt;div class="fbg_resize"&gt;
      &lt;img src="images/image.png" width="900" alt=""  /&gt;
  &lt;/div&gt;
      &lt;!--&lt;div class="clr"&gt;&lt;/div&gt;--&gt;
  </code></pre>
  
  <p></p>
  
  <p>to get it horizontally centered:</p>
  
  <pre><code>.fbg_resize { margin:0 auto; padding:0 40px; width:900px;}
  </code></pre>
  
  <p>here is the code that matters:</p>
  
  <p><a href="http://jsfiddle.net/SFWBL/" rel="nofollow">http://jsfiddle.net/SFWBL/</a></p>