垂直居中圖片不能正常移動Safari瀏覽器/ iOS的

Question

位置圖像

我使用的是垂直居中技術，這裏解釋的CSS-技巧：http://css-tricks.com/centering-in-the-unknown

我有一個需要垂直居中的圖像在一個div中。它似乎在除移動Safari/iOS之外的每個平臺上工作得很好，其中圖像放置在視野之外。我似乎無法弄清楚在移動Safari上引發這個問題的原因是什麼。

下面是一個CodePen問題：是我剝奪了http://codepen.io/anon/pen/iDalc

這裏HTML和CSS

<div class="headline"> 
    <div class="wrapper"> 
    <a> 
     <div class="background"> 
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Durga%2C_Burdwan%2C_2011.JPG/1920px-Durga%2C_Burdwan%2C_2011.JPG"> 
     </div> 
    </a> 
    </div> 
</div>     

<div class="headline"> 
    <div class="wrapper"> 
    <a> 
     <div class="background"> 
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Upper_Antelope_Canyon_Heart_Formation_2013.jpg/640px-Upper_Antelope_Canyon_Heart_Formation_2013.jpg"> 
     </div> 
    </a> 
    </div> 
</div>     

<div class="headline"> 
    <div class="wrapper"> 
    <a> 
     <div class="background"> 
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Maly_Krashokholmsky_bridge_4exp_Oloneo.jpg/1920px-Maly_Krashokholmsky_bridge_4exp_Oloneo.jpg"> 
     </div> 
    </a> 
    </div> 
</div>     

我的CSS：

.headline { 
    background: gray;  
    padding: 0 3.125%; 
    width: 93.75%; 
    margin-left: auto; 
    margin-right: auto; 
    max-width: 768px; 
} 

.wrapper { 
    position: relative; 
    overflow: hidden; 
    min-height: 190px; 
    width: 100%; 
    margin-bottom: 2px; 
} 

.background { 
    position: absolute; 
    top: 0; 
    height: 100%; width: 100%; 
    z-index: 1; 
    background-color: #000; 
    text-align: center; 
} 

.background img { 
    width: 100%; 
    position: relative; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 

.background:before { 
    content: ""; 
    position: absolute; 
    z-index: 2; 
    top: 0; 
    left: 0; 
    display: block; 
    width: 100%; 
    height: 100%; 
} 

誰能指教一下CSS問題是發生在移動Safari？到目前爲止，我已經診斷出它可能與轉換有關：translate-Y屬性。所有的移動Safari測試都在設備以及iOS模擬器上完成。

提前致謝！

Answer 1

任何人誰在任何搜索都會碰到這個問題，我設法解決這個我自己。將.background img更改爲position：absolute;並留下：0;

我不完全理解發生了什麼，但無論它修復了什麼。我還想補充一點，在我原來的帖子中我錯了。在某處，我記錄了我實施的垂直對中技術的CSS技巧，這不是真正的來源。我曾引用以下網址：http://davidwalsh.name/css-vertical-center

更新CodePen：http://codepen.io/anon/pen/zJugd

.headline { 
    background: gray;  
    padding: 0 3.125%; 
    width: 93.75%; 
    margin-left: auto; 
    margin-right: auto; 
    max-width: 768px; 
} 

.wrapper { 
    position: relative; 
    overflow: hidden; 
    min-height: 190px; 
    width: 100%; 
    margin-bottom: 2px; 
} 

.background { 
    position: absolute; 
    top: 0; 
    height: 100%; width: 100%; 
    z-index: 1; 
    background-color: #000; 
    text-align: center; 
} 

.background img { 
    width: 100%; 
    position: absolute; 
    left: 0; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 

.background:before { 
    content: ""; 
    position: absolute; 
    z-index: 2; 
    top: 0; 
    left: 0; 
    display: block; 
    width: 100%; 
    height: 100%; 
}