title: Vertically and horizontally centering text within a div
body: <p>I have a div that comprises a graphic background overlaid with text. I want to center this element horizontally and vertically. But I can't get the text to center vertically. So far, I have the following code:</p>
  
  <pre><code>&lt;div id="step"&gt;
      &lt;div id="background"&gt;
          &lt;img src="buttonbackground.png" class="stretch" alt="" /&gt;
      &lt;/div&gt;
      &lt;div&gt;
         &lt;h3&gt;some text&lt;/h3&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the CSS:</p>
  
  <pre><code>#background {
      width: 100%; 
      height: 100%; 
      position: absolute; 
      left: 0px;
      z-index: -1;
  }
  
  #step {
      text-align:center;
      color:white;
  }
  
  .stretch {
      width:200px;
      height:40px;
  }
  </code></pre>
  
  <p>Using the table-cell/vertical-align technique I've seen often referenced elsewhere doesn't quite work.</p>