直接给父容器加 display: flex + justify-content: center + align-items: center 可解决90%居中场景，但需检查父容器是否有高度、子元素是否脱离文档流、父容器是否被其他 display 覆盖，并注意 ie 兼容性问题。
直接给父容器加 display: flex + justify-content: center + align-items: center，90% 的场景就解决了。但“统一居中”不是一招鲜，得看子元素是否脱离文档流、父容器有没有高度限制、要不要兼容老浏览器。
父容器用 flex 布局时，子元素不居中？检查这三点
flex 居中看似简单，但实际常因隐性条件失效：
- 父容器没设高度（比如空 div 或未定义
height/min-height），align-items: center垂直方向就无效——加min-height: 100vh或具体像素值 - 子元素用了
position: absolute或float，它就不再是 flex item，justify-content对它完全不起作用 - 父容器本身是
display: grid或display: inline-block，display: flex会被覆盖或行为异常，先确认最终 computed style
子元素是图片或按钮，却只水平居中不垂直居中？
很多开发者默认 <img> 或 <button></button> 是“块级”，其实它们默认是 inline 或 inline-block，在 flex 容器里会受 align-items 控制，但若父容器没设高度，视觉上就像没垂直居中。
- 确保父容器有明确高度（如
height: 400px或min-height: 100vh） - 避免给子元素加
vertical-align，它在 flex 环境下被忽略 - 如果子元素内部文字没居中，别在子元素上再套 flex——直接加
text-align: center（对行内内容）或display: flex; justify-content: center; align-items: center（对块级子内容）
要兼容 IE10/11？慎用 justify-content: center
IE10–11 对 justify-content: center 支持有 bug：当父容器是 display: -ms-flexbox 时，多个子元素可能错位，单个子元素也可能偏左几像素。
- 退而求其次，用
text-align: center+display: inline-block组合：子元素加display: inline-block，父容器加text-align: center - 若必须绝对定位，用
left: 50%+transform: translateX(-50%)，IE9+ 都支持，但父容器得有position: relative - 别信“加 -ms- 前缀就万事大吉”，实测中
-ms-justify-content: center在某些 IE11 版本仍不可靠
真正容易被忽略的，是“统一居中”背后隐藏的布局假设：所有子元素都共享同一套定位上下文、尺寸约束和渲染流。一旦混用 position: absolute、float、display: grid，哪怕只在一个子元素上，整个居中逻辑就可能断裂。先理清结构，再选方案，比堆 CSS 更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
