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

Posted 2023-03-12

【中文标题】绝对定位容器中 Ipad 垂直中心上的 IOS Safari

【英文标题】：IOS Safari on Ipad vertical center in absolute positioned container

【发布时间】：2014-09-13 11:44:46

【问题描述】：

我有两个容器，它们的位置绝对是一个在另一个下面，如下所示：

<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-Simulator Ipad 屏幕截图（不应该如此）：

【参考方案1】：

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

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

我认为这与在absolute 上使用absolute 定位和百分比有关。如果您检查html 和body 的高度，它们实际上并没有您的内容那么高——所以计算vcenter 的50% 定位可能会变得一团糟。不确定...

【讨论】：

谢谢伙计，正是我需要的。我忘记了宽度：100%，这就是我首先放弃这个解决方案的原因。谢谢

【参考方案2】：

您是否尝试过使用transform 解决方案？它通常涵盖了诸如 iOS 渲染问题之类的基础知识（其中不只是这种情况）。

像这样编写你的类（它会在 IE9 及以下版本中中断，但这就是浏览器 shiming 的用途，你可以使用 Modernizr 将现有代码用于 shim）

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

这应该在所有现代浏览器以及 iOS Safari 的垂直中心呈现 .vcenter。

【讨论】：

我已经尝试过了，但不幸的是它不起作用。 .vcenter 仍然奇怪地定位自己。就像 IOS 无法处理两个绝对定位的容器，一个在另一个下方，并且基于错误的计算高度或其他东西定位 .vcenter...