title: Vertically centering overflowed text
body: <p>I have horizontally centered some overflowed text (actually I found this on stack overflow). I'm trying to vertically center it to no avail.</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div id="outer"&gt;&lt;div id="inner"&gt;&lt;div id="text"&gt;some text that will overflow&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here's the CSS:</p>
  
  <pre><code>#outer {
    display: block;
    position: relative;
    left: 100px;
    width: 100px;
    border: 1px solid black;
    background-color: silver;
    height: 150px;
  }
  
  #inner {
    /* shrink-to-fit width */
    display: inline-block;
    position: relative;
    /* shift left edge of text to center */
    left: 50%;
  }
  
  #text {
    /* shift left edge of text half distance to left */
    margin-left: -50%;
    /* text should all be on one line */
    white-space: nowrap;
  }
  </code></pre>
  
  <p>I have an adapted fiddle here:
  <a href="http://jsfiddle.net/HfT72/" rel="nofollow">http://jsfiddle.net/HfT72/</a></p>
  
  <p>Does anyone have any thoughts?</p>