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；推荐用标准块级容器（如<div>） - 不能同时设置
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。
但这样做的副作用是：父容器内所有行内级内容（文字、<span> 等）都会被居中，容易误伤布局。
更干净的做法是统一用 Flex：
.parent {
display: flex;
justify-content: center;
}
.child {
display: inline-block; /* 保持原有 display，无需改 */
}Flex 不挑子元素类型，这也是它逐渐替代传统居中手段的核心原因。
