最常用且可靠的方式是给外层容器设置 max-width（如 1200px）并配合 margin: 0 auto 实现水平居中，该方法支持响应式，在大屏居中、小屏自适应缩放，且需确保容器为块级元素，同时建议重置 body 默认 margin。
让页面整体居中，最常用且可靠的方式就是给外层容器（通常是 这是响应式布局中最推荐的做法。它既保证在大屏幕上居中显示，又能在小屏幕上自动缩放不溢出。 HTML 结构通常如下： CSS 可这样写： 立即学习“前端免费学习笔记（深入）”； 部分浏览器会给 或者用更通用的 CSS 重置（如 body 内的主包裹元素，比如 margin: 0 auto。使用 max-width + margin: auto 居中
max-width（如 1200px），而不是固定 width，这样在窄屏下能自适应变窄margin: 0 auto，左右外边距设为 auto，浏览器会自动均分剩余空间，实现水平居中display: block（默认即如此）常见写法示例
max-width: 1200px;
margin: 0 auto;
padding: 0 15px; /* 可选：加点左右内边距，提升小屏体验 */
}
为什么不用 width + margin auto？
width: 1200px 在手机上会强制拉宽，导致横向滚动条；而 max-width 允许它在小屏时收缩到可用宽度（比如 100%），更健壮。
width: 100% 和 max-width: 1200px，就能兼顾“占满小屏”和“限制大屏宽度”margin: 0 auto 依然有效：当视口大于 1200px，居中留白；等于或小于时，贴左（因宽度为 100%，无多余空间可分）额外提示：避免 body 默认 margin 干扰
body 默认添加 margin（如 8px），可能影响整体视觉居中。建议重置：
margin: 0;
}* { margin: 0; padding: 0; }），但注意粒度控制。
