html - 未知高度 div 中的垂直居中图像无法在移动 Safari/iOS 上正确定位图像

Question

我正在使用 CSS-Tricks 上解释的垂直居中技术:http://css-tricks.com/centering-in-the-unknown

我有一张图片需要在 div 中垂直居中。它似乎在除移动 Safari/iOS 之外的每个平台上都工作得很好，在这些平台上图像被放置在 View 之外。我似乎无法弄清楚导致此问题的移动 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%;
}

谁能告诉我移动版 Safari 中发生了什么 CSS 问题？到目前为止，我已经诊断出它可能与 transform: translate-Y 属性有关。所有移动 Safari 测试均在设备和 iOS 模拟器上完成。

提前致谢!

Answer 1

对于在任何搜索中遇到此问题的任何人，我设法自行解决了这个问题。将 .background img 更改为 position: absolute;和离开:0;

我不完全明白发生了什么，但无论它解决了什么。我还想补充一点，我在原来的帖子中弄错了。在某个地方，我将我实现的垂直居中技术归功于 CSS 技巧，但这并不是真正的来源。我引用了以下 URL: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%;
}