ios - Ipad垂直中心上的iOS Safari(绝对放置在容器中)

我有两个容器，它们绝对位于另一个容器的下方，如下所示:

<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错误吗？有人有解决方法吗？我想保持标题在垂直方向上动态调整大小(高度:70％)...

预先感谢您的想法。

桌面截图(应该如何):

iOS模拟器Ipad屏幕截图(应该如何):

最佳答案

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

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

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