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

【问题标题】：Vertical centering image in unknown height div does not properly position image on mobile Safari/iOS未知高度 div 中的垂直居中图像无法在移动 Safari/iOS 上正确定位图像
【发布时间】：2014-10-29 05:57:57
【问题描述】：

我正在使用 CSS-Tricks 上解释的垂直居中技术：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%;
}

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

提前致谢！

【问题讨论】：

标签： html ios css mobile mobile-safari

【解决方案1】：

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

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

【讨论】：