Safari 中 align-items: center 失效主因是其对 flex-direction: row 下基线对齐更敏感，尤其子元素含内联内容时；需父容器明确设 display: flex、固定高度及 align-items: center，避免子元素依赖 align-self 或 vertical-align，并优先转为 block/flex 消除内联干扰。
align-items: center 在 Safari 中失效的典型表现
在 Flex 容器中使用 align-items: center 本应让子元素垂直居中，但 Safari（尤其是 15–16 版本）常出现上偏 1–2px、文字基线错位、或与 Chrome/Firefox 渲染不一致。这不是 bug，而是 Safari 对 flex-direction: row 下的基线对齐更敏感，尤其当子元素含内联内容（如文本、img、input）时，默认会尝试按 baseline 对齐，干扰 center 效果。
必须加 display: flex + align-items: center 的父容器
仅给子元素设 align-self: center 或依赖祖先 flex 居中，Safari 往往不认。确保居中逻辑落在直接父容器上：
.container {
display: flex;
align-items: center; /* 必须写在这里 */
height: 200px;
}
<p>/<em> ❌ 错误：只靠子元素自己撑 </em>/
.child {
align-self: center; /<em> Safari 可能忽略 </em>/
}</p><p>/<em> ✅ 正确：父容器明确声明 </em>/
.container {
display: flex;
align-items: center;
justify-content: center; /<em> 水平也一起控 </em>/
}- 父容器必须有明确高度（
height或min-height），否则 Safari 可能按内容高度收缩，导致“居中”无参照 - 避免用
padding代替height撑高容器——Safari 有时把 padding 算进 flex 基线计算 - 若父容器是
inline-flex，需确认其块级上下文是否稳定（比如被float或display: inline祖先影响）
文字/内联元素偏移时加 align-items: baseline 或 transform
当子元素是纯文本、span、button 等内联级元素，Safari 仍可能因字体度量差异上浮。两种稳妥解法：
- 给子元素加
align-self: baseline，再配合margin-top: auto; margin-bottom: auto强制重算位置（适合单行文本） - 更通用：用
transform: translateY(-50%)配合top: 50%（需父容器position: relative），绕过 flex 基线逻辑 - 终极保险：子元素设
display: block或display: flex，消除内联特性干扰
示例：
立即学习“前端免费学习笔记（深入）”；
.container {
position: relative;
height: 60px;
display: flex;
}
.centered-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}检查 box-sizing 和 border/padding 是否参与计算
Safari 对 box-sizing: border-box 的处理在 flex 场景下偶有偏差，尤其当父容器有 border 或 padding 时，align-items: center 的“中心”可能按 content-box 计算。排查要点：
- 父容器统一设
box-sizing: border-box，并确认border和padding值为 0 或显式声明 - 子元素若有
vertical-align（如vertical-align: middle），必须删掉——它和 flex 的align-items冲突 - 用 Safari 开发者工具勾选「Show Rulers」，直接测量子元素 top 值，确认是否真偏移，而非视觉错觉（比如字体 ascender/descender 不同）
真正麻烦的不是 align-items: center 本身，而是 Safari 把内联格式化上下文、字体度量、box-sizing 边界全搅在一起算。修复时优先锁定父容器 display + height + align-items，再逐层压掉子元素的内联属性和对齐干扰。
