移动 Safari 中块元素的垂直居中问题

Question

我正在尝试将一个 div（高度未知）垂直居中在另一个 div 中。我遵循了教程here，它似乎在 Firefox v33（桌面）、IE11 和 Chrome v39 中正确显示，但在移动版 Safari 7 或 8 中无法正确显示 - 请查看我的 jsFiddle 或 html/ CSS在下面。

为什么移动版 Safari 对待它的方式与其他浏览器不同，我的替代方案是什么？ 我已经尝试过 flexbox，但它在移动版 Safari 中也不起作用。我知道垂直居中可能很棘手。我应该放弃并为要居中的元素分配一个固定的高度吗？如果高度是固定的，我可以让它工作 - 但在其他情况下高度确实是可变的，所以我想知道如何让它在没有固定高度的情况下工作。

<div class="outer">
    <div class="inner">This is a test</div>
</div>

.outer
{
    position: relative;
    background-color: black;    
    height: 100px;
}

.inner
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: red;
}

移动版 Safari

Firefox、IE11、Chrome

Answer 1

您需要为翻译添加 webkit 前缀。这是更新的fiddle。 Caniuse.com 是一个很好的站点，供将来在这些情况下参考。

<div class="outer">
    <div class="inner">This is a test</div>
</div>

.outer
{
    position: relative;
    background-color: black;    
    height: 100px;
}

.inner
{
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    color: red;
}