控制页面主内容宽度应组合使用max-width与margin: 0 auto：max-width设定最大宽度（如1200px/750px），width: 100%确保小屏占满，margin: 0 auto实现水平居中；可配合媒体查询响应式调整，或用CSS Grid的minmax()简化逻辑。
页面主内容宽度难控制，核心在于没用好 max-width 和居中机制的组合。光设 width 会僵硬，只靠 margin: 0 auto 又没上限，两者配合才能既灵活又稳当。
用 max-width 设定内容最大宽度
比起固定 width，max-width 让主内容区在小屏时自动收缩，大屏时也不无限撑开。常见值有 1200px、1140px 或按设计稿定（比如 750px 适配移动端）。
- 推荐写在容器元素上，比如 、 或自定义的 .container
- 搭配 width: 100% 使用，确保小屏下能占满可用空间
- 避免和 min-width 冲突——除非你明确需要最小宽度限制
用 margin: 0 auto 实现水平居中
只要元素是块级且有明确宽度（或 max-width + width: 100%），margin: 0 auto 就能居中。它不依赖 flex 或 grid，兼容性好，适合基础布局。
- 记得给容器设 display: block（多数块级元素默认就是）
- 如果父容器有 padding 或 border，可能影响视觉居中，可加 box-sizing: border-box
- 别在 flex 容器里重复用它——flex 自带 justify-content: center 更直接
响应式增强：配合媒体查询微调
不同断点下，max-width 值可以变化。比如桌面端 1200px，平板 768px，手机直接 100%。
- 在 @media 中覆盖 max-width，比写多个 class 更干净
- 可同时调整 padding，让内容呼吸感更自然（如大屏加左右内边距）
- 注意不要在每个断点都重写 margin: 0 auto——它本身是响应式的，无需重复声明
现代替代方案：CSS Grid 简化逻辑
如果项目支持较新浏览器，用 grid-template-columns 配合 minmax() 更直观：
- grid-template-columns: minmax(320px, 1200px); —— 最小 320px，最大 1200px
- 再加 margin: 0 auto 或 justify-content: center 居中
- 一行代码替代 max-width + width + margin 组合，语义也更清晰
