父容器必须显式设置宽高，否则flex居中失效；justify-content和align-items需同时设置，且依赖父容器可计算的主轴与交叉轴空间。
父容器必须显式设置宽高
Flex 居中本身不依赖子元素尺寸，但 justify-content 和 align-items 的生效前提是父容器有明确的主轴/交叉轴空间。如果父容器是 div 且未设 width/height，它会收缩到内容宽度、高度为 0，导致子元素“看似没居中”——其实是父容器塌陷了。
常见错误现象：.container { display: flex; justify-content: center; align-items: center; } 写了但无效，检查 computed styles 会发现父容器 height 是 0。
- 若需撑满视口：用
width: 100vw; height: 100vh; - 若需占满剩余空间（如 Flex 布局中的中间区域）：父容器需有明确高度来源，比如
flex: 1或固定min-height - 避免仅靠
height: 100%，它依赖父级高度，容易链式失效
justify-content + align-items 是最简解法
这是唯一无需关心子元素是否定宽高、是否脱离文档流、是否换行的方案。只要父容器尺寸确定，一行代码就能让任意子元素（文本、图片、div、甚至空元素）真正居中。
示例：
.parent {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 200px;
background: #eee;
}
.child {
background: #333;
color: white;
padding: 12px 24px;
}
注意：align-items: center 对单行文本也有效，不需要额外包裹 span 或设置 line-height。
- 不要加
flex-direction: column，除非你刻意要翻转主轴 - 避免在子元素上误加
margin: auto，它在 Flex 容器里虽也有效，但属于冗余写法 - IE10–11 需加
-ms-flex-pack: center; -ms-flex-align: center;前缀（当前项目若已放弃 IE 支持可忽略）
margin: auto 在 Flex 子元素上也能用
当子元素是块级元素（默认 display: block）且父容器是 Flex 时，给子元素设 margin: auto 会同时作用于上下左右外边距，达到与 justify-content + align-items 相同效果。
这个技巧适合已有样式体系、不想动父容器声明的场景，但要注意前提：
- 子元素不能是
float或position: absolute - 子元素不能是行内元素（
span等），否则需先加display: block或inline-block - 如果父容器有多个子元素，只有被设
margin: auto的那个会居中，其余按默认顺序排列
示例：
.parent { display: flex; width: 300px; height: 200px; }
.child { margin: auto; }
兼容性与渲染性能的隐性代价
Flex 居中在现代浏览器中稳定可靠，但有两个容易被忽略的点：
- 父容器一旦设为
display: flex，所有直接子元素自动变成 Flex 项目，float、clear、vertical-align失效，原有布局逻辑可能意外中断 - 在深层嵌套或大量动态插入节点的场景（如虚拟滚动列表），频繁触发 Flex 重排比纯定位方案开销略高，尤其在低端 Android WebView 中
- 如果只是临时居中一个弹层，且需兼容 IE9，应改用
position: absolute+transform，而非降级 Flex 前缀
真正难的不是写对那两行 CSS，而是判断「这个容器是否本该是 Flex 布局」——如果不是，硬套 justify-content 很可能埋下后续维护的坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
