如果Safari中的父级太大，则使用滚动条垂直居中div

Question

我有以下选择的div：

<div class="outer">
<div class="middle">
    <div class="inner">
        <p>
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
        </p>
    </div>
</div>

我希望它能使.outer div成为页面的高度，.inner div垂直居中于页面上，如果它的内容太大而不能让页面包含它（包括填充等）然后滚动条在.inner div上显示而不是页面。

到目前为止，我的努力是jsfiddle。该示例适用于Chrome和Firefox，但不适用于Safari。有谁能解释为什么？或者指出了获得跨浏览器解决方案的方向？