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

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