safari 9–12 中 align-items: center 失效主因是父容器无明确高度且缺 -webkit- 前缀，需设 height: 100vh、display: -webkit-flex 及 -webkit-align-items: center，并处理内联元素基线对齐问题。
align-items: center 在 Safari 9–12 里不生效，先看父容器有没有“真高度”
旧版 Safari（≤12.1）根本不会用 min-height 或 height: 100% 去参与 flex 对齐计算——它只认明确、可测量的高度值。写了 align-items: center 却没效果，八成是父容器高度塌陷了。
- 别用
min-height: 100vh，改用height: 100vh或更稳妥的height: -webkit-fill-available - 如果父容器是
position: absolute，必须显式设top/bottom（比如top: 0; bottom: 0），否则 Safari 当作无高处理 - 避免靠
padding撑高容器：Safari 可能把 padding 算进基线，干扰align-items的垂直定位
display: flex 写了但 justify-content/align-items 标灰？大概率缺 -webkit- 前缀
Safari 9–13.1 不解析标准 justify-content 和 align-items，它们不是“失效”，而是压根没被识别——DevTools 里标灰色或带删除线，就是这个信号。
- 必须同时写：
display: -webkit-flex（在前） +display: flex（在后） - 所有容器级属性都要补前缀：
-webkit-justify-content: center、-webkit-align-items: center、-webkit-flex-direction: column -
autoprefixer默认不加这些，得检查browserslist是否包含ios_saf >= 11.3或safari >= 10，否则生成结果里根本没前缀
子元素是纯文本或内联元素时，align-items: center 还是偏上？那是基线对齐在捣鬼
Safari 对 flex-direction: row 下的内联内容（如 span、button、纯数字文本）更倾向按 baseline 对齐，align-items: center 实际被部分覆盖。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 给子元素加
display: block或display: flex，直接消除内联特性 - 若必须保留内联，加
align-self: baseline配合margin-top: auto; margin-bottom: auto强制重算位置 - 终极兜底：父容器
position: relative，子元素position: absolute; top: 50%; transform: translateY(-50%) - 极少数情况（如纯数字文本上浮），给
加lang="zh-cmn-Hans"，让 Safari 切中文排版上下文
flex: 1 撑不满高度，别急着改 align-items，先查 min-width/min-height
旧版 Safari 对弹性项收缩更严格：flex: 1 不等于“自动填满”，它默认受 min-width: auto 限制。即使 align-items: center 正常，子项也可能因未收缩而无法拉伸。
- 水平布局加
min-width: 0，垂直布局加min-height: 0 - 避免混用
width: 100%和flex: 1，Safari 优先按 width 计算，flex 失效 - 如果父容器是
position: absolute，且子项用了margin: auto，Safari 可能忽略它——改用justify-content/align-items组合
真正麻烦的不是 align-items 本身，而是 Safari 旧版本对 min-width、flex-basis、margin: auto 的解析差异——这些不报错，但行为不一致，必须真机调试才能确认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
