最常见原因是父容器未设高度或子元素脱离文档流；flex居中仅对直接子元素生效，需父元素有明确渲染尺寸且为flex容器。
flex 布局中 justify-content 和 align-items 都设了却没居中
最常见原因是父容器没设高度，或子元素是 Float / position: absolute 等脱离文档流的元素。Flex 居中只对 flex 项目（即直接子元素）生效，且要求父元素有明确的渲染尺寸。
- 确认父容器设置了
display: flex，且至少有一个明确的高度（比如height: 100vh或min-height: 400px） - 检查子元素是否被
position: absolute覆盖——一旦绝对定位，它就不再是 flex 项目，justify-content和align-items对它无效 - 避免在子元素上同时用
margin: auto和 flex 居中，可能产生冲突
用 margin: auto 居中时内容不居中
这个方法只对「块级、定宽、非浮动、非绝对定位」的元素有效。它依赖浏览器自动计算左右外边距，所以宽度必须明确指定，否则 auto 会失效。
- 子元素必须设置明确的
width（如width: 300px或width: fit-content） - 不能是
inline元素（比如span），需加display: block - 父容器需是块级上下文（普通
div即可），但不能是flex或grid容器，否则margin: auto行为会改变
div.container { width: 100%; height: 200px; border: 1px solid #ccc; } div.box { width: 200px; height: 80px; background: #007bff; margin: auto; /* 水平垂直都居中 */ display: block; }Grid 布局中 place-items: center 不起作用
place-items 是简写属性，等价于 align-items: center; justify-items: center，但它只影响「网格项」在「网格区域」内的对齐，不是整个容器的居中。如果只有一行一列，且没定义 grid-template-rows / grid-template-columns，浏览器可能按内容自动撑开，导致视觉上没变化。
- 确保父容器有
display: grid，并显式定义行列（哪怕用1fr） - 若想让单个子元素在整块容器里居中，更稳妥的是：
place-content: center（控制整个网格的对齐）或直接用place-items: center+grid-template: 1fr / 1fr - 注意兼容性：
place-items在 IE 中完全不支持，safari 10.1+ 才开始支持
绝对定位 + transform: translate(-50%, -50%) 偏移不准
这个技巧依赖 top: 50% 和 left: 50% 把元素左上角移到中心，再用 transform 回拉自身宽高的一半。一旦元素宽高动态变化（比如文字换行、图片加载延迟），或者父容器有 padding / border，就容易偏移。
立即学习“前端免费学习笔记（深入）”；
- 务必给父容器设
position: relative，否则top/left会相对于视口定位 - 子元素需设
position: absolute，且不能依赖 js 动态改宽高后忘记重算 - 如果子元素含图片，建议加
max-width: 100%和height: auto，防止 transform 回拉量失准
.parent { position: relative; width: 100%; height: 300px; border: 1px solid #ddd; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 240px; background: #28a745; }实际用哪一种，取决于你能否控制父容器样式、是否要兼容老浏览器、以及子元素是否定宽/定高。现代项目优先用 flex；需要精确控制网格结构时选 grid；只有 legacy 支持要求时才退回绝对定位方案。最容易被忽略的是：父容器的尺寸和定位上下文，往往比居中代码本身更重要。