直接用 display: flex 配合 justify-content: center 和 align-items: center 是最可靠、代码最少的居中方案，但必须确保父容器有明确高度（如 height: 100vh 或 min-height: 100dvh）且子元素未脱离文档流（避免 position: absolute 等）。
直接用 display: flex 配合 justify-content: center 和 align-items: center，是当前最可靠、代码最少的方案——但前提是父容器有明确高度。
flex 居中必须设父容器高度
常见错误是只写了 display: flex; justify-content: center; align-items: center，但子元素没居中。根本原因是父容器没设高，比如 height: 100vh 或 min-height: 300px。Flex 的 align-items 垂直对齐依赖父容器的交叉轴（即高度）有可参考值；若父容器高度由内容撑开，它就“塌”成一行高，自然无法垂直居中。
容易踩的坑：
- 父容器被
float、position: absolute或display: contents干扰了文档流，导致高度计算失效 - 用了
height: 100%却没给所有祖先元素设高，结果链路断在某一层 - 移动端 viewport 缩放或第三方 UI 库重置了
body的默认margin和height
绝对定位 + translate(-50%, -50%) 要配 position: relative
写法固定：position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)。关键在于父容器必须有 position: relative（或 absolute/fixed），否则 top/left 会相对于视口定位，子元素飘到屏幕中心而非容器中心。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
为什么用 transform 而不用 margin？因为 translate 的百分比是相对于元素自身宽高，不依赖具体数值，天然适配未知尺寸。但要注意：
- 如果子元素本身已有
transform（比如scale(1.2)），多个transform值需合并书写，否则后写的会覆盖前写的 - 在动画密集场景（如滚动监听触发频繁重绘），
transform触发的是合成层更新，性能尚可；但若同时用了will-change: transform又未清理，可能引发内存占用升高 - IE9 及以下不支持
transform，需 fallback 方案
table-cell 方案兼容老 IE 但语义失真
把父容器设为 display: table，子元素设为 display: table-cell; vertical-align: middle; text-align: center，能兼容到 IE8。但它强制把布局语义变成表格，和语义化 HTML 原则冲突，且父容器不能设 padding（会被 table 模型忽略），border-spacing 等表格式属性也会意外生效。
适用场景有限：
- 必须支持 IE8 的遗留系统维护
- 父容器高度动态变化（table 元素天生自适应高度）
- 子元素是纯文本或简单内联内容，不含复杂嵌套或浮动子项
真正难的不是选哪种方法，而是判断「这个居中是否真的需要脱离文档流」。比如弹窗遮罩层适合用绝对定位，而卡片列表里的头像居中更适合用 flex——后者保留文档流，更利于响应式和无障碍访问。别为了“居中”强行加定位或 hack，先看结构是否合理。
