最直接有效的方案是max-width配合margin: 0 auto，但需确保元素为块级、有明确宽度计算依据、box-sizing: border-box已设置，且避免父容器塌陷或干扰样式；仅max-width不居中因其只限宽不限位。
单列内容在大屏下不撑满、小屏下自适应、整体居中——最直接有效的方案就是 max-width + margin: 0 auto，但必须满足几个前提，否则会失效或引发横向滚动条。
为什么只写 max-width 不居中？
因为 max-width 只限制“最大宽度”，不控制位置。块级元素默认左对齐，没额外声明时，右侧空白会被浏览器忽略，看起来就是贴左显示。
- 必须搭配
margin: 0 auto才能触发居中计算 - 该组合只对块级元素生效（
<div>、<main>等），不能直接写在<body>上——部分浏览器会给<body>默认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，不能直接加在<body>上——<body class="container">不生效
表格（<table>）里怎么让整表居中且限制宽度？
直接给 <table> 写 style="max-width: 800px; margin: 0 auto;" 往往无效，因为表格默认使用 table-layout: auto，列宽由内容驱动，max-width 只约束外框，内部单元格仍可撑开。
立即学习“前端免费学习笔记（深入）”；
- 真正生效的组合是：
table-layout: fixed+<colgroup>+ 显式列宽定义 -
<colgroup>必须紧接<table>开始标签后、<thead>前，顺序错就无效 - 用
<col style="width: 200px">比<th width="200">更可靠，后者在现代渲染引擎中常被忽略 - 若某列需自适应剩余空间，可用
<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的替代方案
