IOS Safari在Ipad垂直中心的绝对定位容器中

Question

我有两个容器，它们完全一个位于另一个下面，如下所示：

<header>
    <div class="vcenter">
    ...
    </div>
</header>
<div id="wrapper">
...
</div>

CSS：

header {
position: absolute;
top: 0;
height: 70%;
}

.vcenter {
position: relative;
margin-top: -50px;
top: 50%;
}

#wrapper {
position: absolute;
width: 100%;
top: 70%;
}

我以相对定位垂直居中 .vcenter 。这适用于所有主流浏览器。只有在Ipad上的IOS Safari上它才会出现问题。查看我正在处理的site。 .vcenter 是徽标的容器。

我通过Xcodes IOS-Simulator检查它，并检查真正的Ipad。这可能是IOS Safari Bug吗？有人有解决方法吗？我想让我的标题动态垂直调整大小（高度：70％）......

提前感谢您的想法。

桌面截图（应该如何）：

IOS-Simulator Ipad截图（它应该是怎样的）：

Answer 1

我无法解释它，但使用position: absolute似乎可以解决您的问题：

.vcenter {
  position: absolute;
  margin-top: -50px;
  top: 50%;
  width: 100%; /* needed to add to fix horizontal positioning */
}

我认为这与在absolute上使用header定位和百分比有关。如果你检查html＆amp;的高度body，它们实际上并不像你的内容那么高 - 所以计算一个50％的vcenter定位可能会搞砸了。不确定......

Answer 2

您是否尝试过使用transform解决方案？它通常涵盖了iOS渲染问题的基础（其中有几个不仅仅是这个场景）。

像这样编写你的课程（它会在IE9及以下版本中断，但那是什么浏览器填充，你可以使用Modernizr将你现有的代码用于垫片）

.vcenter {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
 }

对于所有现代浏览器以及iOS Safari，它应该在垂直中心呈现.vcenter。