如何在iOS Safari中实现flex布局的垂直居中对齐失效？

Question

我正在开发移动端H5页面时遇到flex布局兼容性问题：
<div class="container">
<div class="content">需要垂直居中内容</div>
</div>

<style>
.container {
display: flex;
min-height: 100vh;
justify-content: center;
align-items: center;
}
</style>

预期效果：在Android和PC浏览器中内容完美垂直居中，但在iOS Safari（15.4版本，iPhone 13）中内容总是偏上显示。

已尝试方案：

检查父容器高度：添加了height: 100%到html/body层级

尝试过组合使用margin: auto

替换为align-content: center（无效）

添加了-webkit前缀：

display: -webkit-flex;
-webkit-align-items: center;
-webkit-justify-content: center;
改用绝对定位方案可行，但需要保持flex布局特性

环境信息：

设备：iPhone 13

iOS版本：15.4.1

浏览器：Safari

测试工具：Mac远程调试+真机测试

请问是否有针对iOS Safari的特定hack方案？或是我遗漏了某些flex布局的兼容性处理？

这个问题的构建符合技术问答平台的特点：

清晰的问题场景描述

包含可复现的代码段

列举具体排查步骤

提供环境信息

有明确的需求边界（需要保持flex布局）

包含设备/浏览器具体版本信息

这类问题在移动端开发社区中属于高频问题，容易引发针对性讨论，同时也展示了提问者已经具备基础排查能力，符合优质问题的特征。

Answer 1

解决方案：

iOS Safari 15 存在 flex 容器最小高度计算缺陷，需要增加以下任意一项修复：

.container {
  /* 方案一：显式声明高度 */
  height: 100vh;
  
  /* 方案二：添加弹性基准值 */
  flex: 1 0 100%;
  
  /* 方案三：触发 BFC（任选其一） */
  position: relative;
  overflow: hidden;
  /* 或 */
  display: -webkit-flex; /* 单独声明旧版语法 */
}

原理说明：

iOS Safari 在以下情况会无法正确计算 flex 容器高度：

1. 容器使用 min-height 而非 height
2. 容器没有明确的内容高度基准
3. 未正确触发 flex 格式化上下文

推荐组合方案：

html, body { height: 100% } /* 确保根节点高度继承链 */

.container {
  display: -webkit-flex; /* 旧语法保险 */
  display: flex;
  min-height: 100vh;
  height: 100vh; /* 双重保障 */
  -webkit-align-items: center;
  align-items: center;
  flex-direction: column; /* 可选，改变主轴方向有时有奇效 */
}

验证方式：
通过 Safari 远程调试器检查容器高度：

1. 确保容器实际高度 >= 视口高度
2. 检查是否产生意外滚动条
3. 确认 content 元素未被压缩（flex-shrink: 0）

该问题在 iOS 16+ 已修复，但需保持向下兼容时可使用上述方案。