html - 移动版 Safari 中 block 元素垂直居中的问题

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

火狐、IE11、Chrome

Answer 1

translate需要添加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;
}