title: center image vertically/horizontally over another without dimensions
body: <p>I'm trying to make an image appear to have a play button that is centered.  I will not know the exact size of the main image however, since it's dynamically generated. </p>
  
  <p>Right now, the overlay image (a play button) is in the upper left corner.  How can I have the play button show centered horizontally and vertically?</p>
  
  <p>Thank you.</p>
  
  <pre><code>&lt;div class="videobox"&gt;
  &lt;img src="/mainimage.png"&gt;
  &lt;span&gt;&lt;/span&gt;
  &lt;/div&gt;
  
  .videobox { position: relative; }
  
  .videobox span {
  position:absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: transparent url(../img/elements/playbutton.png) no-repeat;
  }
  </code></pre>