最简单的方法是给内容容器设max-width和margin: 0 auto：max-width兼顾大屏限制与小屏自适应，避免横向滚动条；margin: 0 auto实现水平居中，且需确保块级元素、重置body { margin: 0 }、搭配box-sizing: border-box。
最简单的方法就是给内容容器加 max-width 和 margin: 0 auto，不用 Flex、不用 Grid、不写媒体查询，一行 CSS 就能搞定。
为什么用 max-width 而不是 width
因为 max-width 兼顾大屏和小屏：max-width: 1200px 在宽屏下限制宽度并居中，在窄屏（比如手机）下自动收缩到视口宽度，不会出现横向滚动条或内容被压扁。而固定 width: 1200px 在小屏上会溢出，必须配合媒体查询才能响应式，徒增复杂度。
-
max-width是按父容器宽度计算的，所以必须作用在块级元素上（如<main>、<div class="container">），不能直接设在<body>上——浏览器默认给body加了margin: 8px，会导致整体偏移 - 务必先重置
body { margin: 0 }，否则哪怕写了margin: 0 auto，也会因 body 自带边距而居中失败 - 推荐搭配
box-sizing: border-box，避免padding或border导致实际宽度超出max-width
导航栏全宽 + 正文受限，结构怎么写
常见错误是把 <nav> 和 <main> 套进同一个容器里，结果导航也被缩窄。正确做法是两者平级，都挂载在 <body> 下：
<body style="margin: 0">
<nav style="width: 100%; background: #333; color: white; padding: 1rem 0">
导航内容
</nav>
<main style="max-width: 1200px; margin: 0 auto; padding: 2rem">
正文内容
</main>
</body>
-
<nav>只需width: 100%就天然撑满，加背景色即可视觉全宽 -
<main>单独设max-width+margin: 0 auto，不受导航影响 - 如果正文里还有子区块（如卡片、表单），它们默认继承
max-width，如需突破限制，可单独设width: 100vw并负 margin 补偿
max-width 在表格里为啥不生效
直接给 <table> 设 max-width: 800px 几乎没用，这是表格渲染机制决定的：默认 table-layout: auto 优先按内容定列宽，max-width 只约束外框，压不住内部单元格。
立即学习“前端免费学习笔记（深入）”；
- 真正生效的组合是三者齐备：
table-layout: fixed+<colgroup>+ 显式<col>宽度定义 -
<colgroup>必须放在<table>开头、<thead>之前，顺序错就无效 - 用
<col style="width: 200px">，别用<th width="200">——后者在现代浏览器中常被忽略
最容易被忽略的一点：这个方案只管“内容区域”居中，不处理文本对齐或元素内部居中。比如 <main> 居中了，但里面一段文字要水平居中，还得额外加 text-align: center；一个按钮要垂直居中，就得换 Flex 或其他方式——max-width + margin: 0 auto 管不了那么细。
