title: css/html, how to scale and center a logo image
body: <p>I'm trying to create a typical main menu screen for a game. It's got a logo, centered at the top, and some menu buttons. It will always be shown in landscape layout and it needs to support different resolutions.</p>
  
  <p>here's what I've got so far: <a href="http://jsfiddle.net/L3mNT/" rel="nofollow">http://jsfiddle.net/L3mNT/</a></p>
  
  <p>My questions are these:</p>
  
  <p>1) Is it possible to <strong>center and scale</strong> the logo <strong>using only DIV</strong>? Or is it okay to "resort" to using the img-tag and center-tags? What are the (dis)advantages of a DIV? The DIV logo does scale when I tried adding a height in pixels, like so</p>
  
  <pre><code>.logo{
      ..
      height:120px;
  }
  </code></pre>
  
  <p>but that would have to be updated through javascript in the resize event. I figured it ought to be possible using only css, or am I wrong..?</p>
  
  <p>2) How do I <strong>vertically center</strong> the menu div, the buttons need to be in the middle of the screen and may not drop off the bottom of the screen. The following didn't work</p>
  
  <pre><code>.menu{
      width:50%;
      height:50%;
      margin:auto auto;
  }
  </code></pre>