flex居中需三条件：父容器display:flex、有明确高度、子元素不设margin:auto；absolute+transform需父relative、单条声明；place-items需现代浏览器支持；vertical-align仅适用于table-cell或inline元素。
display: flex + align-items: center 不是万能结构，但它是现代项目中**最接近万能的方案**——前提是父容器高度有约束、子元素没乱加 margin: auto。
为什么 flex 居中经常“写了却不动”
不是属性写错了，而是三个硬性条件缺一不可：
- 父容器必须设
display: flex——align-items对非 flex 容器完全无效 - 父容器必须有明确高度（如
height: 100vh、min-height: 300px或被内容撑开）—— 没高度，交叉轴就无参考长度，“center”无法计算 - 子元素不能同时设
margin: auto—— Safari 中会与 flex 居中逻辑冲突，导致上下偏移 2–3px
position: absolute + transform: translate(-50%, -50%) 的真实适用边界
这个组合适合局部精确控制、兼容老浏览器（IE9+），但极易因上下文缺失失效：
- 父容器必须设
position: relative（或absolute/fixed）—— 否则top: 50%会相对于 viewport 定位，滚动时飘走 -
transform: translate(-50%, -50%)必须写成单条声明 —— 拆成translateX(-50%)和translateY(-50%)易漏、易拼错，且无实际收益 - 子元素宽高动态时（如图片未加载、字体未就绪）会出现短暂闪动 —— 可提前用
min-height或aspect-ratio占位缓解
place-items: center 真正省事，但得看项目底子
Grid 的这行代码确实一行搞定水平+垂直居中，但它不是“无脑换”：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 需浏览器支持 Chrome 57+ / Firefox 52+ / Safari 10.1+ —— IE11 完全不认，必须回退到
justify-items: center; align-items: center; - 若父容器已有
grid-template-areas或复杂轨道定义，place-items可能覆盖原有对齐逻辑 - 它对所有直接子元素生效，不区分是否设置了
grid-area—— 如果父容器里混着多个子元素又只想居中其中一个，得改用align-self: center
vertical-align: middle 为什么总不生效
这不是 bug，是它根本就没设计成“容器级垂直居中”工具：
立即学习“前端免费学习笔记（深入）”；
- 只在两种场景有效：父容器是
display: table-cell，或元素自身是inline/inline-block（比如img与文字混排） - 对默认
display: block的div直接写vertical-align—— 完全无反应 - 即使把
div改成inline-block，它的对齐基准仍是“行框内的基线”，不是整个父容器的中点
flex 发现不居中？先查父容器有没有 height，再查有没有意外透传的 margin: auto —— 这比重写一遍方案快得多。 
