flex实现局部居中需父容器设display: flex、justify-content: center和align-items: center，并确保父容器有明确宽高；仅用justify-content会只水平居中，无高度则视觉无变化。
用 flex 实现局部元素水平垂直居中
只要父容器不是 display: inline 或被强制限制为不可伸缩，display: flex 是最直接、兼容性足够（IE10+）、且不破坏文档流的方案。
常见错误是只写 justify-content: center 忘了 align-items: center，结果只水平居中；或者父容器没设高度，导致子元素“看起来没动”——其实它已按 flex 规则居中，只是父容器塌陷了。
- 父容器必须有明确的宽高（或能撑开的高度，比如含内容、设
min-height） - 避免在父容器上同时用
float或position: absolute，会干扰 flex 布局 - 子元素无需设
margin: auto，flex 下它无效 - 若需兼容 IE9 及更早版本，此方案不可用，得换其他方式
用绝对定位 + transform 居中，适合脱离文档流场景
当模块需要脱离常规流（比如弹窗、提示气泡、固定悬浮按钮），position: absolute 配合 transform: translate(-50%, -50%) 是稳妥选择。
容易踩的坑是：父容器没设 position: relative，导致子元素相对整个视口定位；或者忘了加 top: 50%; left: 50%，只写 transform 没效果。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 父容器必须显式声明
position: relative（或absolute/fixed）作为定位上下文 -
transform的百分比基于自身尺寸，所以translate(-50%, -50%)才能真正居中 - 该方法对子元素宽高无要求，哪怕它是
display: inline文字也生效 - 注意 z-index 管理，尤其多个绝对定位模块叠加时
模块化样式设计：用 class 命名约束居中行为
不要写 .center-box { display: flex; justify-content: center; align-items: center; } 这种泛用类——它把布局逻辑和语义混在一起，后期改一个模块的居中方式就得全局搜替换。
更合理的是按功能或容器角色命名，比如 .modal-content、.card-body、.hero-cta，然后在对应模块的 CSS 里单独定义居中规则。这样改 .card-body 的居中方式，不影响其他模块。
- 避免通用类如
.center、.v-center，它们在多人协作或长期维护项目中极易失控 - 如果真要抽离复用逻辑，优先用 CSS 自定义属性（
--center-flex）或预处理器 mixin，而不是 class - 配合 BEM 命名时，居中行为属于修饰符层级，例如
card__body--centered，而非独立 class
文字单行居中和不定高容器居中的区别
纯文字居中，很多人还用 line-height == height，这仅适用于单行、定高场景。一旦文字换行或容器高度由内容撑开，就会错位。
不定高容器（比如含多段落、图片、动态内容的卡片）必须用 flex 或绝对定位，line-height 方案在此失效。
-
text-align: center只管水平居中，对垂直毫无作用 -
vertical-align: middle只在 table-cell 或 inline 元素内有效，日常 div 布局中基本不用 - 若容器内只有单个内联元素（如图标 + 文字），可用
display: inline-block+vertical-align: middle配合父容器line-height，但结构脆弱，不推荐作为主方案
justify-content 后，顺手检查下父容器有没有被 overflow: hidden 切掉内容，或者子元素有没有 margin 把位置悄悄顶偏，比追求“最简一行代码”更重要。 
