title: center <IMG/> inside a <DIV> with CSS
body: <p>I want to center image inside a div. The div has fixed width 300px. The image width is known only at runtime. It usually is bigger then 300px, so image should be centered and cut right and left. margin 0 auto does not work in this case.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  
  div{width:300px;border:1px solid red; overflow:hidden}
  
  img{
  /* NOTE!!!!
  margin:auto; doesn't work when image width is bigger than div width
  image width is known only at runtime!!!
  */
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div&gt;
      &lt;img src="" /&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks for any css ideas</p>
  
  <hr>
  
  <p><strong>UPD</strong>  This interesting task is followed <strong><a href="https://stackoverflow.com/questions/4974991/block-inside-a-block-drawing-border-around-the-visible-area-untrivial-task">here</a></strong></p>