margin: auto 水平居中需满足：子元素为块级且有明确宽度（非auto），父元素为块级上下文（非inline/inline-block），且未设置float或absolute；Flex的justify-content: center更可靠因其不依赖子元素宽度和display类型，但需父元素设display: flex且注意flex-direction影响对齐方向。
块级元素用 margin: auto 水平居中需要满足什么条件
直接写 margin: 0 auto 不生效，是最常见的困惑来源。它只在**块级元素有明确宽度**且**父容器是块级上下文（非 inline）** 时才起作用。
关键点：
- 子元素必须设置
width（或max-width），不能是width: auto（默认值）且内容撑满父容器 - 父元素不能是
display: inline或inline-block；推荐用标准块级容器（如）- 不能同时设置
float或position: absolute，否则auto失效.box { width: 200px; margin: 0 auto; }Flex 布局中
justify-content: center为什么更可靠它不依赖子元素宽度，也不受
float或display类型干扰，只要父容器设为display: flex就能立刻生效。但要注意默认主轴方向是水平的（
flex-direction: row），所以justify-content控制的是水平对齐；如果改了flex-direction: column，它就变成控制垂直对齐了。立即学习“前端免费学习笔记（深入）”；
常见误用：
- 忘了给父元素加
display: flex—— 单独写justify-content完全无效 - 父元素没有高度，导致子元素“看不见居中效果”（尤其内部是空内容或图片）
- 子元素用了
margin: auto，会覆盖justify-content的行为
.container { display: flex; justify-content: center; } .box { /* 不需要 width，也不怕 inline 元素 */ }哪些场景下
margin: auto反而比 Flex 更合适当页面需要兼容 IE10 及以下（不支持 Flex）时，
margin: auto是唯一可行的纯 CSS 水平居中方案。另外，在某些重排敏感的动画场景中，Flex 的
justify-content可能触发额外布局计算，而固定宽 +margin: auto行为更可预测。不过要注意：
-
margin: auto对inline元素无效，必须先转成display: block或inline-block - 多个并列块级元素无法用
margin: auto同时居中 —— 它只对单个块生效；此时必须用 Flex 或 Grid -
响应式设计中，若用
width: 50%配合margin: auto，在小屏下可能溢出，需配合max-width和box-sizing: border-box
别忽略的细节：行内块元素也能用
margin: auto居中？不能。给
display: inline-block元素设margin: auto，左右 margin 会被忽略（上下 margin 有效）。想让它水平居中，得靠父容器的text-align: center。但这样做的副作用是：父容器内所有行内级内容（文字、
等）都会被居中，容易误伤布局。更干净的做法是统一用 Flex：
.parent { display: flex; justify-content: center; } .child { display: inline-block; /* 保持原有 display，无需改 */ }Flex 不挑子元素类型，这也是它逐渐替代传统居中手段的核心原因。
- 不能同时设置
