必须设置width或max-width，因为块级元素默认宽度100%，无剩余空间可分配；只有当元素宽度小于父容器时，margin: 0 auto才能均分左右空白实现居中。
为什么 margin: 0 auto 必须配 width 或 max-width
块级元素默认宽度是 100%，此时 margin: 0 auto 没有可分配的剩余空间，左右外边距都为 0，根本不会居中。只有当元素宽度小于父容器时，浏览器才能把多余空间均分到左右两侧。
所以必须显式设置宽度约束：
-
width: 960px：严格固定宽度，缩放窗口小于此值时内容会溢出或出现横向滚动条 -
max-width: 960px：更推荐——在宽屏下保持呼吸感，在窄屏下自动收缩，配合margin: 0 auto实现“弹性居中” -
width: 80%：百分比宽度也有效，但需注意父容器是否被浮动或inline-block塌陷影响实际宽度
常见错误：只写 margin: 0 auto 却漏掉宽度声明，结果页面依然左贴边。
单列布局中 header/content/footer 的三种结构组合
不是所有“单列”都用同一个 DOM 结构。实际项目里，头尾是否通栏（100% 宽度）直接影响 CSS 写法和维护成本。
典型场景与对应写法：
-
全等宽布局：header、main、footer 都限制在
max-width: 960px内，共用一个 wrapper：<div class="layout"></div>包裹全部三部分 -
通栏头尾 + 居中主体：header 和 footer 直接设
width: 100%，内部再套一层class="layout"；main 单独设max-width+margin: 0 auto -
通栏头尾 + 居中内容区：header 和 footer 不设宽度，但其子内容（如 logo、nav、版权文字）放在
div.layout里；main 同样用div.layout—— 这是最灵活、最易扩展的写法
注意：若 header 或 footer 使用了 float 或 display: inline-block，会导致父容器高度塌陷，margin: 0 auto 可能失效。
max-width 配合 margin: 0 auto 在响应式中的实际表现
这套组合本身不响应，但它是响应式布局的基石——它让“最大宽度”成为断点设计的锚点。
例如：
.layout {
max-width: 960px;
margin: 0 auto;
padding: 0 1rem; /* 小屏下留白 */
}
<p>@media (max-width: 768px) {
.layout {
max-width: 100%;
padding: 0 0.5rem;
}
}</p>
关键点：
-
max-width是“上限”，不是“固定值”，它允许元素在窄屏下自然收缩 -
padding替代固定margin控制内边距，避免小屏内容贴边 - 不要在
@media里重复写margin: 0 auto—— 它在所有断点下都生效，只要宽度没撑满父容器
性能上无损耗，兼容性极好（IE6+ 支持），但无法解决垂直居中问题。
Flexbox 能替代吗？什么时候不该用
可以替代，但没必要为纯单列水平居中升级整个布局模型。
用 display: flex 实现居中需额外约束：
- 父容器必须设
height（比如min-height: 100vh）才能让align-items: center生效 - 若页面有滚动内容，
flex容器高度可能被内容撑开，导致“视觉居中”失效 - 老项目兼容性要求高（如仍需支持 IE11），
flex的justify-content在 IE 中存在对齐偏差
真正需要 Flex 的场景是：既要水平居中，又要垂直居中，且容器高度可控（如登录框、弹窗）。普通文档流页面的单列主体，max-width + margin: 0 auto 仍是更轻量、更稳定的选择。
容易被忽略的是：当 .layout 元素被嵌套在另一个设置了 text-align: center 的父容器里时，margin: 0 auto 依然有效，但初学者常误以为是 text-align 在起作用——其实它只影响行内元素，对块级居中毫无关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
