justify-content: center 无效的主因是容器缺乏主轴剩余空间或未正确启用Flex/Grid布局；需确认父容器设了display: flex/grid、宽度未被子项撑满、且无float/absolute等导致脱离文档流的属性。
justify-content: center 为什么没让内容居中
因为 justify-content: center 只在容器有“主轴剩余空间”时才起作用——如果容器宽度刚好被子项撑满、或根本没撑开，它就无空间可分，自然不居中。
- 用 DevTools 检查容器的
computed width：若等于所有子项总宽（比如 300px 容器里放了三个 100px 的 item），那justify-content就是摆设 - 容器是
display: inline-grid或display: inline-flex？它们默认不占满父宽，主轴空间极小，center几乎无效 - 父容器加了
float、position: absolute或overflow: hidden，会让子容器脱离正常流，高度/宽度计算异常
父容器没设 display: flex 是最常见原因
justify-content 是 Flex/Grid 专属属性，对普通 div、ul（非 Bootstrap 4/5 的 .pagination）完全无效——写了也白写。
- 确认你加了
display: flex或display: grid到**直接父容器**上，不是爷爷辈容器 - Bootstrap 3 的
.pagination是inline-block布局，justify-content-center类根本不存在，加了也不识别 - Vue 模板里如果用了
v-for渲染列表，确保外层包裹元素显式声明了display: flex，别指望组件根标签自动继承
Flex 换行后末行靠左，不是 justify-content 失效，是它本就不管这个
当 flex-wrap: wrap 开启后，justify-content: center 只对**每一行内**的子项生效。最后一行子项少，宽度总和远小于容器宽，就会靠左——这不是 bug，是设计如此。
- 想视觉上整体居中（尤其响应式卡片），优先改用
display: grid+place-items: center或justify-content: center配合固定列宽（如flex: 0 0 calc(33.333% - var(--gap))） - 别给子项加
margin: 0 auto试图补救：换行后它只在单行有剩余空间时有效，末行失效 - 用
text-align: center包裹inline-flex子项可行，但要清空 HTML 换行空白（比如父级设font-size: 0）
弹窗或遮罩层里 justify-content:center 不垂直居中？你用错了方向
justify-content 默认控制的是主轴方向，而主轴由 flex-direction 决定。默认 row → 主轴是水平的 → 它只管水平居中。垂直居中得靠 align-items: center。
立即学习“前端免费学习笔记（深入）”；
- 弹窗遮罩层必须同时写：
display: flex、justify-content: center、align-items: center - 遮罩层还得有明确高度，比如
min-height: 100vh；否则容器高度塌陷为内容高，“垂直中心”就是顶部 - 子元素如果是
img或span这类 inline 元素，先确保它变成块级（display: block）或弹性项（flex: 0 0 auto），否则不参与对齐
实际调试时，最容易被忽略的是容器是否真正“有空间”和“在正确上下文里”。写完样式后，先看 computed 样式里 display 和 width 是否符合预期，比反复调 justify-content 有用得多。
