Question

我使用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问题吗？到目前为止，我已经诊断出它可能与变换有关：translate-Y属性。所有移动Safari测试都在设备和iOS模拟器上完成。

提前致谢！

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

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

1 个答案: