align-items: center 不居中是因为父容器未启用 flex 上下文、高度塌陷或子元素误用 margin: auto；需检查 display 类型、容器高度及 margin 冲突。
写了 align-items: center 却不居中？大概率不是代码写错，而是父容器没撑开或没启用 flex 上下文。
flex 布局里 align-items 不生效的三个硬条件检查点
这个属性只在 display: flex 或 display: inline-flex 容器里起作用，且依赖交叉轴（垂直方向）有明确长度。失效时优先查这三项：
- 父容器是否真加了
display: flex—— 浏览器开发者工具里看 computed styles，确认display值不是block或被其他样式覆盖 - 父容器高度是否塌陷 —— 检查
height、min-height是否设置，或是否有内容/ padding / border 把它撑起来；height: 100vh最直接，但 iOS Safari 中地址栏缩放会导致vh计算不准，可补html, body { height: 100% }+min-height: 100% - 子元素是否意外用了
margin: auto—— 尤其在 Safari 中，它会和align-items: center冲突，导致上下偏移，删掉即可
position: absolute + transform 居中后“飘偏”的真实原因
现象是元素左上角卡在父容器中心，而不是自身中心对齐——本质是只做了定位，没做回拉。
- 必须同时写
top: 50%、left: 50%和transform: translate(-50%, -50%)；拆成translateX(-50%) translateY(-50%)容易漏写或拼错，不推荐 - 父容器必须设
position: relative（或absolute/fixed），否则top/left会相对于 viewport 定位，滚动时位置乱飘 - 如果子元素宽高动态（比如图片未加载完、字体未就绪），会出现短暂闪动；可提前设
min-height或用aspect-ratio缓解
vertical-align: middle 在表格单元格里失效的典型误用
这个属性只对 table-cell、inline、inline-block 元素有效，且控制的是“行内盒子的基线对齐”，不是绝对居中。
立即学习“前端免费学习笔记（深入）”；
- 直接在
<td>上写vertical-align: middle是有效的，但只影响它的直接子级中属于行内级的内容（文字、<span>、<img>） - 如果
<td>里嵌了个<div>，而你给这个<div>设vertical-align: middle，它完全无效 —— 因为<div>默认是display: block，得先改成display: inline-block - 现代项目中，真要用表格布局做居中，不如直接把
<td>改成display: flex; align-items: center; justify-content: center，语义清晰、控制力强
Grid 的 place-items: center 看似简单，但容易忽略的叠加风险
它是一行代码实现水平+垂直居中的最简方案，但只适合“单个子元素”场景，且对已有 grid 布局敏感。
- IE11 不支持
place-items，需回退到justify-items: center; align-items: center - 如果父容器已定义了
grid-template-areas或复杂轨道（如grid-template-columns: 1fr 2fr），加place-items可能覆盖原有对齐逻辑，尤其当子元素还设了grid-area时 - 它对所有直接子元素生效 —— 如果父容器里不止一个子元素，又没额外约束，它们会全部堆在中心点，视觉上反而错乱
真正难的不是写出某一行居中代码，而是判断当前 DOM 结构和样式上下文是否满足那个方案的前提条件。很多“不生效”背后，其实是容器尺寸、display 类型、定位上下文这些底层约束没到位。
