margin: 0 auto 实现居中+留白需配合固定/最大宽度容器，原理是浏览器将父容器剩余宽度均分给左右外边距；前提是子元素为块级且声明 width 或 max-width，否则不生效。

直接用 margin: 0 auto 配合固定或最大宽度容器，就能实现内容居中 + 两侧留白；不需要 JS、不用 hack，但必须理解 width 和 margin 的配合逻辑。

为什么 margin: 0 auto 能留白又居中

它不是“加留白”，而是让浏览器把左右剩余空间均分——父容器有宽度限制时，子元素自动收缩，auto 把空出来的部分平分到左右外边距上。实际效果就是内容被“夹”在中间，两侧自然出现等宽空白。

• 前提是子元素必须是块级元素（如 div、section），且声明了 width 或 max-width
• 如果子元素没设宽度，margin: 0 auto 不生效（默认 width: auto，占满父容器）
• 父容器本身若没约束宽度（比如没设 max-width），整个页面会撑满视口，留白就只靠 body 的 margin/padding 控制

body 级留白 vs 容器级留白，选哪个

两者不冲突，但职责不同：body 的 margin 或 padding 是全局页边距；容器的 margin: 0 auto 是内容区域居中。推荐组合使用，避免依赖浏览器默认样式。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 先重置：* { margin: 0; padding: 0; box-sizing: border-box; }（防止 Chrome 默认 body margin: 8px 干扰）
• 再设 body 内边距：body { padding: 0 24px; } → 两侧固定留白，上下不留（或按需设）
• 最后套容器：.wrapper { max-width: 1200px; margin: 0 auto; } → 在留白区内居中内容，响应式更稳

响应式两端留白的常见踩坑点

固定像素留白（如 padding: 0 20px）在小屏上可能过窄，大屏上又显局促。用相对单位更安全，但要注意兼容性和计算逻辑。

• 优先用 rem：body { padding: 0 1.5rem; }，配合根字体大小动态调整
• 慎用 %：padding: 0 5% 看似灵活，但百分比基于父容器宽度，滚动条宽度变化会导致留白抖动
• 移动端适配别漏 viewport：<meta name="viewport" content="width=device-width, initial-scale=1">，否则 rem 和 max-width 可能失效
• Flex/Grid 容器里 margin: 0 auto 依然有效，但若父容器是 display: flex，子元素会受 justify-content 影响，此时 margin 可能被忽略

真正难的不是写对那一行 margin: 0 auto，而是想清楚“留白”到底属于哪一层：是页面边缘的呼吸感（body padding），还是内容区块的视觉隔离（wrapper margin），抑或是卡片之间的间隙（.card { margin-bottom: 16px; }）。混用层级却不加区分，才是后期布局错乱的根源。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！