Safari中Flex垂直居中失效，主因是父容器缺乏明确高度（如height或min-height: 100vh），而非不支持；iOS 9.3–12/macOS Safari 10–13对此校验更严格。
直接说结论：Safari 里居中失效，90% 是因为 vertical-align、flex 交叉轴高度、或 transform 定位上下文没配对。不是 Safari “不支持”，而是它比 Chrome 更严格地执行规范。
Flex 布局在 Safari 中垂直居中不生效？先查父容器高度和前缀
写完 display: flex + align-items: center 却不居中，常见于 iOS 9.3–12 或 macOS Safari 10–13。问题不在属性本身，而在 Safari 对「无明确高度的 flex 容器」会跳过垂直对齐计算。
- 父容器必须有
height、min-height（比如min-height: 100vh）或被内容撑开；仅靠padding或border不够 - 老版本 Safari（-webkit-justify-content 和
-webkit-align-items前缀，尤其在body直接设 flex 时容易漏 - 避免在
body上直接写display: flex——它可能干扰html的默认高度继承，建议包一层<main class="container"> - 如果子元素是图片，Safari 默认按
vertical-align: baseline计算基线，即使父容器是 flex，也得显式加align-self: flex-start或vertical-align: top
图片在 Safari 里 vertical-align: middle 失效？别用 inline 模式硬扛
Safari 对行内元素的基线对齐逻辑最“较真”：只要父容器有非标准 line-height、font-size，或存在隐藏空白符，vertical-align: middle 就大概率错位。这不是 bug，是它更贴近 CSS 规范。
- 首选方案：把图片设为
display: block，再用margin: auto（需设宽）或父容器display: flex; align-items: center - 若必须保留
inline（如图文混排），清空父容器的line-height和font-size，或设font-size: 0再单独给文字设字号 - 别用
vertical-align: middle对齐图片和文字——它对齐的是“行框中线”，不是视觉中点；改用vertical-align: text-bottom或微调vertical-align: -2px -
object-fit+object-position在 Safari 中易失效，必须给父容器加width和height（哪怕min-width/min-height），否则 Safari 直接忽略object-position
absolute + transform 居中在 Safari 滚动时偏移？定位上下文漏了
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) 这套组合在 Safari 里表现稳定，但一旦滚动就飘走，基本可以断定父容器没设 position: relative。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须有
position: relative、absolute或fixed—— 否则top: 50%会相对于 viewport 计算，页面一滚动，元素就脱离父容器 - 不要拆写
transform: translateX(-50%) translateY(-50%)，容易漏掉任一值；统一写成translate(-50%, -50%) - 子元素宽高动态（如字体加载中、图片未解码）时，Safari 可能出现短暂闪动；可提前设
min-height或用aspect-ratio锁定比例 - 避免同时用
align-items: center和transform: translateY(-50%)控制同一元素，二者逻辑冲突，Safari 优先级不稳定
text-align: center 对块级子元素无效？你混淆了作用对象
给父容器加 text-align: center，发现里面的 <div> 还是贴左？这是最常踩的认知坑：text-align 只影响**行内级内容**（文字、<span>、<img> 默认 inline），对块级元素完全无效。
- 想让块级元素水平居中，必须用
margin: 0 auto（需设宽度）、display: flex + justify-content: center，或display: grid + place-items: center - 如果子元素是
display: inline-block，text-align: center能生效，但要注意父容器里不能有换行/空格字符，否则会产生 4px 左右的间隙，导致“看起来没居中” - 邮件客户端或旧版 WebView 中，
align="center"属性仍可能比text-align优先，但语义差、不可维护，现代项目应避免
真正难搞的不是某一种方案，而是 Safari 对「隐式行为」的零容忍——它不会帮你猜意图，所有依赖默认值的地方（比如父容器高度、行高、定位上下文）都必须显式声明。调试时打开 Safari 开发者工具，直接看 computed styles 里的 height、position、display 类型，比猜更省时间。
