safari中text-align:center对inline元素失效，主因是其对父容器display类型解析更严格：table-cell需配vertical-align:middle，flex需显式设align-items，且不继承父级vertical-align。
Safari 中 text-align: center 对 inline 元素失效
不是 CSS 写错了，而是 Safari 对某些父容器的 display 类型解析更严格。比如 display: table-cell 或 display: flex 未显式设 align-items / vertical-align 时，text-align: center 只管水平，不管垂直；而你真正想居中的可能是文字在单元格里上下不居中。
常见于表格 <td> 或用 <code>display: table-cell 模拟布局的场景：
- 确认父元素是否设置了
vertical-align: middle（td默认是top） - 若用了
display: table-cell，必须配vertical-align: middle，仅text-align: center不够 - Safari 对
vertical-align的继承行为比 Chrome 更保守，不要依赖父级设置向下透传
Safari 中 Flex 布局 justify-content / align-items 不生效
原因常是 Safari 版本较老（尤其是 iOS 14–15），或父容器没设 display: flex，或子元素被 float / position: absolute 干扰了参与 Flex 排列。
实操要点：
- 检查父容器是否真的应用了
display: flex（用 Elements 面板看 computed 样式，别只信源码） - 避免对 Flex 子项同时设
float或position: absolute——它们会脱离 Flex 上下文 - iOS Safari 14.5 之前不支持
gap，改用margin或伪元素模拟 - 旧版 Safari 需加
-webkit-前缀：-webkit-justify-content: center、-webkit-align-items: center
Safari 中绝对定位元素用 top: 50%; transform: translateY(-50%) 偏移
这不是 bug，而是 Safari 对 transform 在某些组合下（如父容器有 perspective 或 will-change）的渲染差异。更稳妥的方式是换用 Flex 或 Grid。
如果必须用绝对定位：
- 确保父容器有明确高度（
height或min-height），Safari 对100%高度计算更苛刻 - 避免在父容器上同时设
overflow: hidden和transform，可能触发渲染层剥离异常 - 改用
inset：例如inset: 0; margin: auto;+width/height固定值，兼容性更好
Safari 中 margin: 0 auto 水平居中失败
根本原因是元素没变成块级或没设宽度。Safari 不会像 Chrome 那样“宽容”地给 inline 元素自动套块盒。
典型踩坑点：
-
<img>默认是 inline，必须加display: block才能用margin: 0 auto -
<span></span>包文字时，即使设了width，也得先display: inline-block或block - 父容器若用了
text-align: justify，会影响inline-block元素的居中表现 - 不要依赖
center标签——它在 Safari 中已被完全忽略，且 HTML5 废弃
最易被忽略的是：Safari 对 CSS 解析优先级更“字面”，比如 !important 在某些嵌套层级下会被框架样式覆盖得更彻底；遇到居中失效，第一反应不该是加更多 hack，而是打开 Elements 面板，逐层看 computed 的 display、width、height 和 box-sizing——很多问题其实在 layout 阶段就已注定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
