Safari 9–12中flex居中失效需三步修复：1. 父容器设确定高度（如height: 100vh或-webkit-fill-available）；2. 显式声明flex-direction（如column）；3. 子元素加flex-shrink: 0防止压缩。
flex居中在Safari 9–12里不生效的典型表现
父容器设了 display: flex、justify-content: center 和 align-items: center，Chrome/Edge 正常居中，但 Safari 9–12（尤其是 iOS 9–12.4 的 WebKit）里子元素完全不居中，甚至偏左上角——这不是 bug，是旧版 WebKit 对 flex 的默认行为未完全实现所致。
必须显式设置父容器高度才能触发对齐
旧版 Safari 不会把 min-height: 100vh 或 height: 100% 当作有效高度参与 flex 对齐计算，除非父容器有确定的、可测量的高度值。常见失效场景包括：
- 父容器仅靠
height: 100%且其祖先没设高度 → Safari 忽略align-items - 用
min-height: 100vh但页面内容少 → Safari 不触发垂直居中 - 父容器是
position: absolute但没设top/bottom→ 高度坍缩
实操建议：直接写死高度或用 viewport 单位配合 !important 强制生效：
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 不要用 min-height */
/* 或更稳妥： */
height: -webkit-fill-available; /* Safari 专有，兼容 iOS 9+ */
}
align-items: center 在 Safari 旧版需配合 flex-direction
当子元素是单行内联内容（比如纯文本或 ），且父容器未声明 flex-direction，Safari 9–12 可能将 align-items 解释为对齐基线而非中心点。这不是 CSS 规范问题，是渲染引擎对“交叉轴”的推断偏差。
解决方法很直接：
- 显式加
flex-direction: column或row，避免依赖默认值 - 若需垂直居中，优先用
flex-direction: column+justify-content: center（此时align-items控制水平） - 对纯文本子元素，加
line-height: 1或vertical-align: middle作为后备
别忽略 flex-shrink 导致子元素被压缩变形
旧版 Safari 对 flex-shrink: 1（默认值）的处理更激进，尤其当子元素含图片或设置了 max-width 时，可能把本该居中的块“压扁”到左侧。现象是：水平居中看似正常，但元素宽度异常变窄。
关键修复项：
- 给子元素加
flex-shrink: 0，阻止意外压缩 - 若子元素是图片，额外加
width: auto防止被 flex 框架重设尺寸 - 避免在子元素上同时用
flex: 1和固定宽高，旧 Safari 会优先按 flex 计算而非 content
最易被忽略的是：这些属性在现代浏览器里往往“碰巧”没问题，一放到 Safari 9–12 就暴露，而且错误不报错、不警告，只能靠真机或 BrowserStack 复现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
