title: CSS vertically centered element fails to wrap
body: <p>I'm vertically centering an element using the last method on <a href="http://css-tricks.com/centering-in-the-unknown/" rel="nofollow noreferrer">this page</a>. It's working well, but it has a pretty big issue. When the browser is too thin for the element to fit at full width, rather than having automatic word wrapping kick in the element jumps down to be below the container. As my container has overflow: hidden, this just ends up hiding the element.</p>
  
  <p>Here's a <a href="http://jsfiddle.net/YM_Industries/VrN9d/1/" rel="nofollow noreferrer">Fiddle</a> showing my problem. (You can click and drag the vertical seperator in order to easily shrink the output frame until the issue appears)</p>
  
  <p>Code here in-case JSFiddle is inaccessible:</p>
  
  <p>CSS:</p>
  
  <pre><code>.outer {
      height: 300px;
      background: black;
  }
  
  .outer:before {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
  }
  
  .inner {
      display: inline-block;
      vertical-align: middle;
      background: white;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="outer"&gt;
      &lt;div class="inner"&gt;
          test test test test test test test test test
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>For those who like pictures:</p>
  
  <p>Good:</p>
  
  <p><img src="https://i.stack.imgur.com/uuamd.png" alt="good screenshot"></p>
  
  <p>Bad:</p>
  
  <p><img src="https://i.imgur.com/kRpfJYR.png" alt="bad screenshot"></p>
  
  <p>Desired:</p>
  
  <p><img src="https://i.imgur.com/TDT4Pe1.png" alt="desired screenshot"></p>
  
  <p>With my centering situation, the height of the contents is unknown but the height of the parents IS known.</p>
  
  <p>Is there a way for me to have vertical centering and a fluid layout? (With pure CSS)</p>
  
  <p>Thanks,</p>
  
  <p>YM</p>
  
  <p>EDIT: An answer, now deleted, suggested that I try display: inline instead of display: inline-block for the child element. This is (maybe) closer to what I want to achieve, but not quite there:</p>
  
  <p><img src="https://i.imgur.com/SrnVWCr.png" alt="inline"></p>