container类需搭配mx-auto才能居中，因其默认仅设max-width而无自动外边距；单独使用时在小屏退化为w-full，父容器为flex/grid时还可能被压缩，须加flex-shrink-0或嵌套处理。
container 类为什么加了也不居中
它默认只设 max-width，不带 margin-left: auto 和 margin-right: auto。单独写 container 就像只写了 max-w-640（在 sm 断点），但没配 mx-auto，自然贴左不居中。
常见误判场景：
- 小屏（xs）下
container等价于w-full，根本没max-width限制 - 父容器是
flex或grid，又没设flex-shrink-0，container被压缩成窄条 - 浏览器审查元素看到
max-width: auto，说明父级塌缩，没提供宽度上下文
必须搭配 mx-auto 才能真正居中
mx-auto 不是“自动居中”的魔法开关，它只对有明确宽度的块级元素生效。没有 max-w-* 类时，mx-auto 对 w-full 元素毫无作用——左右 margin 设为 auto，但宽度已是 100%，结果还是贴边。
正确组合方式：
-
container mx-auto：最简写法，依赖 Tailwind 默认断点（sm+ 开始约束） -
max-w-4xl mx-auto：绕过container的断点逻辑，全尺寸生效 -
sm:max-w-md md:max-w-lg lg:max-w-7xl mx-auto：手动控制各断点宽度，避免默认跳跃
别混用 container mx-auto max-w-7xl——双重 max-width 会叠加，最终容器比预期窄。
父容器是 flex/grid 时 container 容易被压缩
如果 container 直接放在 flex 或 grid 容器里，且父级没设 flex-shrink: 0，它会被强制收缩。这不是 bug，而是 Flex 布局的默认行为。
解决办法：
- 给
container加flex-shrink-0 - 在外层包一层
div并设w-full，再把container mx-auto放进去 - 直接放弃
container，改用max-w-7xl mx-auto+ 显式w-full父容器
特别注意：overflow: hidden、transform 或 position: sticky 的父级可能截断 mx-auto 渲染，先查渲染层，再调 class。
小屏也要约束宽度？别指望 container 默认行为
container 在 xs 下退化为 w-full，这是设计使然，不是缺陷。想让手机屏也限制宽度，必须显式干预：
-
max-w-screen-sm mx-auto：相对视口宽度，适合快速响应式 -
sm:max-w-md mx-auto：从 sm 开始生效，xs 仍撑满（符合多数设计规范） -
max-w-[1200px] mx-auto：固定像素宽度，需启用 JIT 模式
真正容易被忽略的是：padding 和 margin 的外边距合并（margin collapse）。比如 header 设了 mb-6，container 设了 pt-6，实际空白只有 6px。更稳的做法是把 container 当纯宽度约束器，留白交给子元素处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
