max-width + margin: 0 auto 是单列居中布局的核心组合，前者设宽度上限，后者触发居中；二者缺一不可，且必须作用于块级容器，配合box-sizing: border-box更稳妥。
max-width + margin: 0 auto 是最直接有效的组合
单列居中布局的核心不是“怎么让内容看起来居中”，而是“怎么让浏览器知道该把内容放在哪儿”。max-width本身只设上限，不控制位置；margin: 0 auto才是触发居中的关键指令。两者必须同时存在，缺一不可。
常见错误现象：max-width: 1200px写了但内容还是贴左；或者加了margin: 0 auto却没效果——大概率是元素没设为块级或没显式宽度（虽然max-width已隐含宽度约束，但部分旧浏览器仍要求width明确声明）。
- 必须作用在块级容器上，比如
<div class="container">，别直接写在<body>上（<body>默认有浏览器自带margin，需先重置） - 推荐搭配
box-sizing: border-box，避免padding或border撑破max-width - 百分比值如
max-width: 90%基于父容器计算，不是视口宽度，小屏下可能过窄；固定值如max-width: 1440px更可控
Bootstrap 的 container 类不能直接套在 body 上
container 是 Bootstrap 定义的类名，本质是一组预设的max-width和margin: 0 auto规则，但它只对标准 DOM 结构生效：必须是<div class="container">包裹内容，而不是<body class="container">。
常见错误现象：给<body>加class="container"，结果整个页面没变化——因为 Bootstrap 的 CSS 选择器（如.container > *）根本匹配不到body的子元素。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 正确用法：用
<div class="container">包住<main>、<section>等正文区域，<header>和<footer>可单独处理 - 如果需要导航栏全宽、内容受限，就别把
container套在最外层，而应分层使用：<header>不加container，<main>内加 -
container-fluid是 100% 宽，没有max-width限制，别混淆
table 元素的 max-width 失效不是 bug，是布局机制决定的
给<table>直接加style="max-width: 800px"常常没反应，文字照常撑开整行。这不是样式写错，而是表格默认采用table-layout: auto，优先按内容定列宽，max-width只作为容器整体上限，不约束内部单元格。
真正生效的组合是：table-layout: fixed + <colgroup> + 显式列宽定义。
-
<colgroup>必须放在<table>开始后、<thead>前，顺序错就无效 -
<col style="width: 200px">比<th width="200">更可靠，后者在现代 layout 中可能被忽略 - 某列想“弹性占剩余空间”，可用
<col style="width: 1fr">（仅现代浏览器支持），或退化为width: auto配合min-width/max-width
flex 布局能绕过 width 依赖，但要注意作用层级
用display: flex + justify-content: center实现居中，不需要显式设置width或max-width，对子元素类型也无要求。但它作用在父容器上，不是目标元素本身。
容易踩的坑：以为给目标 div 加display: flex就能居中自己——其实它只是让自己的子元素居中；若目标 div 就是唯一内容，那它的父容器才该设 flex。
- 垂直居中要加
align-items: center，否则只水平生效 - 如果父容器高度未定义（比如
height: auto），align-items: center可能无视觉效果 - IE10+ 支持基本 flex，但老版本对
flex-wrap、gap等支持差，生产环境建议加 fallback
max-width生效的前提是元素有确定的块级上下文**。浮动、绝对定位、inline-block 都会破坏这个前提，导致margin: 0 auto失效。遇到居中不生效，第一反应不该是调参数，而是检查 display 和 position。 
