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

火狐，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; 
}