最直接有效的方案是max-width配合margin: 0 auto，但需确保元素为块级、有明确宽度计算依据、box-sizing: border-box已设置，且避免父容器塌陷或干扰样式；仅max-width不居中因其只限宽不限位。

单列内容在大屏下不撑满、小屏下自适应、整体居中——最直接有效的方案就是 max-width + margin: 0 auto，但必须满足几个前提，否则会失效或引发横向滚动条。

为什么只写 max-width 不居中？

因为 max-width 只限制“最大宽度”，不控制位置。块级元素默认左对齐，没额外声明时，右侧空白会被浏览器忽略，看起来就是贴左显示。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 必须搭配 margin: 0 auto 才能触发居中计算
• 该组合只对块级元素生效（<div>、<code><main></main> 等），不能直接写在 上——部分浏览器会给 默认 margin，导致偏移
• 如果父容器是 display: inline-block 或浮动元素，可能造成父容器塌陷，margin: 0 auto 失效

max-width 值用固定像素还是百分比？

固定值（如 max-width: 1200px）更可控，适合内容密度高、设计稿有明确断点的场景；百分比（如 max-width: 90%）基于父容器宽度计算，不是视口宽，容易在嵌套容器中意外缩窄。

• 推荐初学者用固定值，避免因父级 padding/margin 导致实际可用宽度远小于预期
• 若需响应式弹性，可配合 min-width 和媒体查询，例如：@media (max-width: 768px) { .layout { max-width: 100%; } }
• Bootstrap 的 container 类本质就是固定断点下的 max-width + margin: 0 auto，但它是 class，不能直接加在 上—— 不生效

表格（<table>）里怎么让整表居中且限制宽度？ <p>直接给 <code><table> 写 <code>style="max-width: 800px; margin: 0 auto;" 往往无效，因为表格默认使用 table-layout: auto，列宽由内容驱动，max-width 只约束外框，内部单元格仍可撑开。

• 真正生效的组合是：table-layout: fixed + <colgroup></colgroup> + 显式列宽定义
• <colgroup></colgroup> 必须紧接 <table> 开始标签后、<code><thead> 前，顺序错就无效 <li>用 <code><col style="width: 200px"> 比 <th width="200"> 更可靠，后者在现代渲染引擎中常被忽略 <li>若某列需自适应剩余空间，可用 <code><col style="width: 1fr">（仅 Chromium/Firefox 105+ 支持），或退化为 width: auto 配合 min-width/max-width

容易被忽略的兼容性细节

看似简单的居中，常因边界情况翻车：小屏下横向滚动条、文字溢出、padding 撑破限制宽度……这些都不是 bug，而是 CSS 盒模型和布局规则的自然结果。

• 务必加 box-sizing: border-box，否则 padding 和 border 会超出 max-width 限定范围
• 如果内容含长单词或无空格字符串（如 URL、base64），需额外加 word-break: break-word 或 overflow-wrap: break-word
• Flex/Grid 容器内子项设 margin: 0 auto 也能居中，但这是 flex item 的特殊行为，不是通用规则——别把它当成 max-width 的替代方案