margin: 0 auto 能让块级元素水平居中，但必须配合显式宽度（如width: 768px或max-width: 1200px），否则因无剩余空间可分配而完全无效；行内元素、浮动/绝对定位元素及flex/grid子项均不适用。
margin: 0 auto 能让块级主体元素水平居中，但必须配合显式宽度，否则完全无效。
为什么 margin: 0 auto 没反应？
这是最常踩的坑：浏览器根本不知道“左右均分多少”，因为没给宽度。它只对「有明确 width 或 max-width」的块级元素起作用。
-
width可以是像素值（如width: 768px）、百分比（如width: 90%），甚至fit-content - 元素不能是
display: inline或未设display: block—— 行内元素不响应margin: auto - 父容器不能用
text-align: left干扰（尤其当子元素是inline-block时） - 别在
body直接写margin: 0 auto，它会把整个页面内容左对齐再“假装居中”
怎么写才真正自适应？
用 max-width 替代固定 width，搭配 margin: 0 auto，既能限制最大宽度，又能在小屏下自动收缩：
.main {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
-
max-width让内容在大屏下不拉得太开，在小屏下自动退回到 100% 宽度 -
padding左右留白，避免紧贴视口边缘 - 如果需要垂直居中（比如全屏登录框），
margin: 0 auto不管用，得换 Flex 或 Grid
现代替代方案：Flex 布局更稳
如果你发现 margin: 0 auto 在嵌套或响应式场景里总出问题，直接用 Flex 更省心：
立即学习“前端免费学习笔记（深入）”；
main {
display: flex;
justify-content: center;
}
- 不用管子元素宽高、是否块级、有没有设
width - 只影响主轴（水平），加
align-items: center才能垂直居中 - Safari 旧版需补
display: -webkit-flex和-webkit-justify-content: center - 别把
display: flex直接加在body上，容易破坏默认文档流（比如影响footer定位）
真正麻烦的不是“怎么居中”，而是“居中后其他元素要不要跟着动”。margin: 0 auto 是静态偏移，Flex/Grid 是布局重构——选哪个，取决于你愿不愿意为居中重新组织整个容器结构。
