align-items: center没效果的根本原因是父容器缺少可测量的交叉轴长度，即未设置height或min-height，且未满足display: flex前提；常见表现是子元素紧贴顶部、容器高度塌缩为0或滚动跳动。
flex + align-items: center 为什么写了没效果
绝大多数“写了却没居中”的情况，根本不是 align-items: center 有问题，而是父容器不满足两个硬性前提：display: flex 和**有可测量的交叉轴长度**（即明确高度）。
常见错误现象包括：子元素紧贴顶部、整个父容器高度塌缩为 0、滚动时突然跳动。
必须检查：
- 父容器是否漏写了
display: flex（仅子元素设display: flex没用） - 父容器是否没有
height或min-height，且内部无内容撑开（例如只写了width: 100%） - 父容器是否被
float、position: absolute或其他脱离文档流的样式干扰，导致高度计算失效
absolute + transform(-50%, -50%) 的真实依赖条件
这个方案能绕过子元素尺寸未知的限制，但成败全在定位上下文是否可靠。它不依赖子元素宽高，但极度依赖父容器的 position 状态。
关键约束：
- 父容器必须显式设置
position: relative（或absolute/fixed），否则top: 50%会相对于 viewport 计算，一滚动就飘走 -
transform: translate(-50%, -50%)必须写成一行，不能拆成translateX和translateY单独调用（易漏、易拼错） - 若子元素是图片或字体未加载完的文本，会出现短暂“上跳再回中”的闪动；可用
min-height或aspect-ratio提前占位缓解
grid place-items: center 的兼容性与叠加风险
display: grid; place-items: center 是语义最干净的单行解法，但有两个隐藏成本：
一是浏览器支持底线为 Chrome 57 / Firefox 52 / Safari 10.1+，IE11 需降级为 justify-items: center; align-items: center；
二是它会覆盖已有 grid 轨道定义中的对齐行为——如果父容器已用 grid-template-areas 或复杂 grid-template-rows，加了 place-items 可能让其他子项意外偏移。
适用场景很窄：仅当父容器是纯粹居中容器、且无其他 grid 布局意图时才推荐。
line-height + text-align 只适用于单行内联内容
这个老方案看似简单，实际限制极多：
它要求子元素是纯文本或可设为 display: inline-block 的元素（如 img），且必须单行显示；
父容器需同时满足：text-align: center（水平）、line-height 等于容器高度（垂直）、height 显式固定；
一旦文本换行、子元素是 div 或设置了 padding/border，line-height 就完全失效。
所以它不是“通用方案”，只是特定场景下的取巧手段。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：所有方案都卡在同一个地方——父容器的交叉轴（垂直方向）必须有确定长度。没有高度约束的 flex 容器、没有定位上下文的 absolute、没有显式尺寸或内容撑开的 grid 容器，都会让“居中”失去计算依据。这不是 bug，是 CSS 布局模型本身的逻辑闭环。
