margin: 0 auto 居中需满足三条件：元素为块级、有明确宽度、父容器非 flex/grid；Flex 居中须在父容器设 justify-content: center；绝对定位需 left: 50% 配合 transform: translateX(-50%)；Grid 用 place-items: center 时仅作用于直接子项且 IE 不支持。
用 margin: 0 auto 居中时，为什么没反应？
因为这个方法只对「有明确宽度」且「是块级元素」的 div 有效。如果没设 width，或者元素是 display: inline 或 flex 子项，默认撑满父容器，auto 就没意义了。
常见错误现象：div 看起来“没动”，检查发现它宽度是 100%，或父容器没设宽度、或用了 float / position: absolute。
- 必须显式设置
width（比如width: 300px或width: 80%） - 确保元素是标准流中的块级元素（默认
div满足，但若被display: inline-block改过，需重置） - 父容器不能是
display: flex或display: grid（此时会走另一套规则）
Flex 布局里 justify-content: center 不生效？
这通常是因为你只在子元素上写了它，而不是父容器。Flex 的居中能力由父容器控制，子元素自己设没用。
使用场景：现代项目首选，兼容性到 IE10+，适合响应式布局和动态内容。
立即学习“前端免费学习笔记（深入）”；
- 必须在父容器上设置
display: flex，再加justify-content: center - 如果子元素是多行，加
flex-wrap: wrap后需配合align-content: center（垂直方向） - 注意：父容器若高度未定义，
align-items: center（垂直居中）可能看起来“没效果”——先确认父高是否可测
绝对定位 + transform 居中，left: 50% 后为什么偏右？
因为 left: 50% 是把元素左边缘移到父容器中点，不是整体居中。所以必须用 transform: translateX(-50%) 把自身往左拉回一半宽度。
性能影响：transform 触发合成层，比纯 layout 更高效；但滥用会导致过多图层，尤其在移动端。
- 必须同时写
left: 50%和transform: translateX(-50%) - 父容器需设
position: relative（否则会相对于 viewport 定位） - 不推荐用于需要流式响应的场景——宽度变化时，
transform不自动适应，不如 Flex 可靠
Grid 布局中 place-items: center 能不能直接用？
可以，但要注意它同时控制水平和垂直居中，而且只对直接子元素生效。如果你只想水平居中，用 justify-items: center 更精准。
兼容性：Chrome 57+/Firefox 52+/Safari 10.1+，IE 完全不支持。
-
place-items: center是justify-items: center+align-items: center的简写 - 仅适用于
display: grid的直接子项；嵌套子项不会继承 - 如果父容器是
grid但没定义grid-template-areas或行列，它仍会按单格渲染，此时居中表现正常
最常被忽略的一点：居中行为高度依赖上下文——父容器的 display 类型、尺寸是否确定、是否参与文档流，都会让同一行 CSS 表现出完全不同结果。调试时优先检查父级样式，而不是反复改子元素。
