margin: 0 auto 水平居中需满足块级元素且有明确 width/max-width；失效主因是缺失宽度、非块级显示（如 inline-block/float）、父容器为 flex/absolute 或作用于行内元素；text-align:center 不居中容器自身；推荐 flex 布局或绝对定位+transform（限脱离文档流场景）。
margin: 0 auto 是让块级容器水平居中的最直接、最可靠方式，但必须满足两个硬性条件：容器是块级元素，且设置了明确的 width 或 max-width。
为什么 margin: 0 auto 没反应？
这不是 CSS 写错了，而是前提被悄悄破坏了：
-
div没设width（比如只写了margin: 0 auto却没写width: 300px或width: 80%）——浏览器无法计算“左右均分多少”，直接忽略 - 容器被设成了
display: inline-block或float: left，它已不是普通流中的块级元素，margin: auto失效 - 父容器用了
display: flex或position: absolute，子元素的margin: 0 auto在这些上下文中不参与居中计算 - 误把
margin: 0 auto加在img或span上——它们默认是行内元素，margin: auto对水平方向完全无效
text-align: center 能不能用来居中容器？
不能。这个属性只控制「块级容器内部的行内内容」如何对齐，不移动容器自身位置。
- 给
<div>加text-align: center，只是让它里面的文字、<img>、<span>居中，<div>自己仍在左上角 - 如果里面嵌套了另一个
<div>（块级），它不会被居中——text-align对块级子元素无影响 - 只有当你把目标容器改成
display: inline-block，再配合父容器的text-align: center，才间接实现居中，但这引入了额外约束（比如父容器里不能有换行符/空格干扰）
现代项目推荐用 display: flex
当需要更可控、更健壮的居中逻辑，尤其涉及响应式或垂直居中时，直接在父容器上启用 Flex 布局：
- 父容器加
display: flex; justify-content: center;→ 子容器水平居中（无需设width） - 若还需垂直居中，再加
align-items: center;，并确保父容器有高度（如min-height: 100vh） - 兼容性足够好：Chrome 29+、Firefox 28+、Safari 6.1+、Edge 12+，2026 年已无兼容顾虑
- 注意别反向操作：给要居中的容器自己加
display: flex—— 它不是布局容器，加了没意义
绝对定位 + transform 适合什么场景？
仅用于脱离文档流的精确定位，比如模态框、提示气泡、固定悬浮按钮等。
立即学习“前端免费学习笔记（深入）”；
- 写法是：子容器设
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 它会让容器从正常流中消失，后续元素会“塌陷”上来，必须手动处理留白或层叠关系
- 旧 Android 浏览器（4.4 及以下）需补
-webkit-transform，但这类设备如今基本退出主流支持范围 - 别把它当成通用居中方案——它解决的是“锚点定位”，不是“布局居中”
margin: 0 auto 发现不动，第一反应不该是“是不是浏览器 bug”，而是立刻检查 display 和 width 是否就位。 
