CSS垂直居中元素无法换行

我使用上一个方法垂直居中一个元素。它运行得很好，但有一个相当大的问题。当浏览器太薄，无法完全容纳元素时，而不是在元素中自动换行，则会跳到容器下方。因为我的容器有overflow:hidden，所以它最终会隐藏元素

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

如果无法访问JSFIDLE，请在此输入代码：

CSS:

HTML:

测试测试

对于喜欢图片的人：

好:

坏的：

期望的：

在我的居中情况下，内容物的高度未知，但父母的高度已知

有没有一种方法可以让我进行垂直居中和流体布局？（使用纯CSS）

谢谢

YM

编辑：一个现已删除的答案建议我为子元素尝试display:inline而不是display:inline块。这（可能）更接近我想要实现的目标，但还不完全如此：

HTML：

请参阅更多和。

HTML：

---

查看更多和。

EWW，表格单元格真的是最好的方法吗（@YM_Industries，据我所知，是的。该死，太糟糕了。啊，好吧，谢谢希普斯，我想我会用这个。EWW，表格单元格真的是最好的方法吗？：（@YM_Industries，据我所知，是的。该死，太糟糕了。啊，谢谢希普斯，我想我会用这个。

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

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

<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>

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

#inner div {
    background: white;
}