最可靠、代码最少、语义最清晰的居中方案是display: flex + justify-content: center + align-items: center，但需确保父容器有可测量高度（如min-height: 100vh），否则align-items无效。
直接用 display: flex + justify-content: center + align-items: center，是当前最可靠、代码最少、语义最清晰的方案。只要父容器能设为 flex 容器，子元素无论文字、图片、SVG 还是动态生成的卡片，都能稳稳居中。
为什么只写三行 CSS 却经常不生效？
根本原因不是写法错，而是父容器高度不可计算。Flex 的 align-items: center 依赖交叉轴（垂直方向）有明确长度，如果父容器高度由内容撑开、又没设 min-height 或 height，那它实际高度就是 0，自然无法“居中”。
- 常见错误现象：
justify-content生效（水平居中了），但align-items看不出效果，元素紧贴顶部 - 必须确保父容器有可测量的高度来源，比如：
min-height: 100vh、height: 100%（前提是所有祖先元素都有高度）、或显式设height: 400px - 不要依赖
body默认高度：HTML 和 body 都得加height: 100%才能让子级继承
flex 居中在多子元素场景下怎么控制？
justify-content 和 align-items 作用于所有直系子元素。如果你只希望其中一个居中，其余按默认流排列，就不能靠父容器统一设置。
- 想单独居中某一个子元素：给它加
margin: auto（前提是父容器是 flex，且该子元素没设flex相关属性干扰） - 想让多个子元素整体居中（比如一排按钮居中对齐）：保持父容器
display: flex，并用justify-content: center即可 - 若子元素换行（
flex-wrap: wrap），align-items: center仍控制每行的垂直对齐；想让多行整体在容器中垂直居中，需额外加align-content: center
兼容性与性能要注意什么？
现代浏览器早已无压力，但仍有几个隐性坑容易被忽略：
立即学习“前端免费学习笔记（深入）”；
- IE10/11 支持带前缀的
display: -ms-flexbox，但不支持place-items或gap；如需兼容，建议用 Autoprefixer 自动生成前缀 - 慎用在频繁重绘的动画元素上：虽然
transform本身性能好，但若父容器已有will-change: transform或滚动监听触发重排，叠加 flex 布局可能放大抖动 - 避免嵌套过深的 flex 容器：每层都触发 flex 计算，尤其在移动端低端机型上，
align-items: stretch（默认值）可能引发意外拉伸
真正容易被忽略的是高度来源——不是 flex 写错了，而是忘了父容器连“可居中的空间”都没有。哪怕只是加一行 min-height: 100vh，就能让整套逻辑立刻跑通。
