旧版 safari（≤12.1）中 align-items: center 失效，因不识别标准语法，需补 -webkit-align-items 且父容器必须有明确高度；同时需配合 display: -webkit-flex，子元素为内联级时须设 display: block 或使用绝对定位兜底。
旧版 Safari（≤12.1）里 align-items: center 失效，不是 CSS 写错了，而是它压根没“看到”这个属性——必须补 -webkit-align-items，且父容器得有真高度。
为什么 Safari 标灰或忽略 align-items
Safari 9–13.1 不解析标准 align-items，DevTools 里标灰色或带删除线，就是信号。它只认旧草案语法：-webkit-align-items: center，而且必须和 display: -webkit-flex 成对出现。
-
display: flex单独写，Safari 当作普通块处理，后续所有 flex 属性全失效 -
display: -webkit-flex必须写在display: flex前面，顺序反了整条规则被跳过 - autoprefixer 默认不加这些前缀，除非
browserslist明确包含ios_saf >= 9或safari >= 10
父容器没高度是最大坑点
写了 -webkit-align-items: center 还是不居中？八成是父容器高度塌陷。旧 Safari 对 min-height、height: 100% 视而不见，只认明确可测量的值。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 用
height: 100vh或height: -webkit-fill-available，别用min-height: 100vh - 如果父容器是
position: absolute，必须显式设top: 0; bottom: 0，否则 Safari 当作无高 - 避免靠
padding撑高容器——Safari 可能把 padding 算进基线，干扰垂直定位
内联元素导致上浮怎么办
子元素是纯文本、<span></span>、<button></button> 等内联级时，Safari 默认按 baseline 对齐，align-items: center 实际被覆盖。
- 最稳解法：给子元素加
display: block或display: flex，直接消除内联特性 - 若必须保留内联，加
align-self: baseline+margin-top: auto; margin-bottom: auto - 兜底方案：
position: absolute; top: 50%; transform: translateY(-50%)，但需父容器position: relative
flex: 1 拉伸失败别怪 align-items
即使 align-items 正常，子项仍不撑满高度？旧 Safari 对 flex: 1 收缩更严格，默认 min-width: auto 锁死尺寸。
- 水平布局加
min-width: 0，垂直布局加min-height: 0 -
flex: 1在 iOS 8.4 及更早完全无效，得拆成-webkit-flex-grow: 1+-webkit-flex-shrink: 1+-webkit-flex-basis: 0% - 别混用
flex: 1和width: 100%——Safari 优先按 width 计算，flex 被降级
真正麻烦的不是加前缀，而是 Safari 的“选择性失明”：它可能认了 display: -webkit-flex，却因父容器缺 height 或子项带 min-width: auto，直接跳过整个 flex 计算链。每一步都得验证，不能只改一个地方就以为搞定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
