CSS垂直居中的元素无法包装

Question

我使用this page上的最后一个方法垂直居中一个元素。它工作得很好，但它有一个很大的问题。当浏览器太薄而元素无法适应全宽时，而不是在元素中自动换行，跳转到容器下方。由于我的容器有溢出：隐藏，这最终会隐藏元素。

这是显示我的问题的Fiddle。 （您可以单击并拖动垂直分隔符，以便轻松缩小输出帧，直到出现问题）

此处的代码在案例中JSFiddle无法访问：

CSS：

.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;
}

HTML：

<div class="outer">
    <div class="inner">
        test test test test test test test test test
    </div>
</div>

对于喜欢图片的人：

好：

为：

所需：

由于我的居中情况，内容的高度未知，但父母的身高已知。

有没有办法让我有垂直居中和流畅的布局？ （使用纯CSS）

谢谢，

YM

编辑：现在删除的答案建议我尝试显示：内联而不是显示：子元素的内联块。这可能（可能）更接近我想要实现的目标，但并不完全存在：

Answer 1

HTML：

<div id="outer">
  <div id="inner">
    <div>Some long content hereSome long content hereSome long content hereSome long content hereSome long content hereSome long content hereSome long content hereSome long content hereSome long content hereSome long content here</div>
  </div>
</div>

CSS：

#outer {
    background: black;
}
#inner {
    display: table-cell;
    vertical-align: middle;
    height: 300px;
    width: 100%;
}

#inner div {
    background: white;
}

JSFiddle查看更多here和here。