flex + align-items: center 无效的主因是父容器未设高度或未启用 flex 布局；需确保 display: flex 且父容器有明确高度（如 height: 100vh 或 min-height: 300px），并清除 body 默认 margin。
flex + align-items: center 为什么写了没效果？
因为父容器没高度，或者没启用 flex 布局——align-items 对非 display: flex 容器完全无效。
常见错误现象：.container { display: flex; align-items: center; } 写了但子元素还是贴顶；检查 computed styles 会发现父容器 height 是 auto 或 0px。
- 必须给父容器设明确高度：比如
height: 100vh、min-height: 300px，或靠内容（padding/兄弟元素）撑开 - 若用
100vh，iOS Safari 中地址栏缩放可能导致视口高度跳变，建议补min-height: 100%+html, body { height: 100% } - 别在
body上直接写 flex —— 默认有margin，先清掉：body { margin: 0; } - 子元素不能同时设
margin: auto，尤其在 Safari 中会和 flex 居中冲突，导致上下偏移
absolute + transform: translate(-50%, -50%) 的真实限制
这个方案兼容 IE9+，但“写了就居中”是假象，它强依赖定位上下文和坐标系。
典型错误：只写 top: 50% 和 left: 50%，结果元素左上角卡在中心点，而不是自身居中。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
position: relative（或absolute/fixed），否则top/left会相对于 viewport 计算，滚动时飘走 -
transform: translate(-50%, -50%)必须完整写，不能拆成translateX和translateY单独调用（易漏、无收益） - 百分比基于子元素自身宽高，所以对动态内容（如未加载完的图片、字体未就绪的文字）也可靠，但可能短暂闪动
- 如果子元素已有其他
transform（如scale(1.2)），得合并写：transform: translate(-50%, -50%) scale(1.2)，否则顺序错乱会导致偏移
grid 的 place-items: center 适合什么场景？
这是语义最强、代码最简的二维居中方案，但不是万能替代 flex 的工具。
它等价于 justify-items: center; align-items: center;，一行搞定水平+垂直居中，且不关心子元素尺寸是否固定。
- 最低支持 Chrome 57 / Firefox 52 / Safari 10.1+；IE11 不支持，需回退到
justify-items: center; align-items: center; - 只对直接子元素生效，不要求子元素是 grid item 或设
grid-area - 若父容器已有复杂
grid-template-areas或轨道定义，加place-items可能覆盖原有对齐逻辑 - 不适合多子元素需要不同对齐方式的场景——它是一刀切，不是精细化控制
表格单元格里 vertical-align: middle 为什么失效？
它专为 <td> 和 <th> 设计，但只对“行内级”内容有效，不是万能垂直居中属性。
典型误用：在 <td> 里放一个 <div>，设了 vertical-align: middle 却不生效。
-
<div>默认是块级，vertical-align对它完全无效——得改成display: inline-block -
<td>自身默认是table-cell，所以直接在<td>上设vertical-align: middle是有效的，但只影响它的直接子“行内级”内容（文字、<span>、<img>） - 一旦单元格内容变复杂（多行
<p>、<button>、含图片），应把<td>改成 flex 容器：display: flex; align-items: center; justify-content: center; -
valign="middle"已被 HTML5 废弃，React/Vue 等框架会忽略，必须禁用
不定高元素垂直居中的核心矛盾不在“怎么写”，而在“谁来提供参考尺寸”——flex 和 grid 需要父容器有可计算高度，absolute 需要定位上下文稳定，vertical-align 需要内容处于行内流。最容易被忽略的是：所有方案都假设你清楚当前元素的渲染上下文，而实际项目里，float、position: absolute、display: contents 或 CSS 框架重置样式，都可能悄悄破坏这个前提。
