container类不直接居中，而是通过响应式max-width配合隐含mx-auto实现居中，但仅在屏幕宽度≥sm（640px）时生效；小屏下退化为w-full贴边显示。
container 类本身不直接实现居中，它只是提供响应式最大宽度；真正起居中作用的是隐含的 mx-auto 行为——但这个行为只在父容器有足够宽度空间时才生效，否则会退化为 w-full。
container 类在不同断点下的实际表现
默认情况下，container 从 sm（640px）开始生效：小屏下 container 等价于 w-full，内容贴边显示，看起来“没居中”。这是最常被误认为“失效”的原因。
-
sm起：max-width: 640px，自动加mx-auto -
md起：max-width: 768px -
lg起：max-width: 1024px -
xl起：max-width: 1280px -
2xl起：max-width: 1536px
也就是说，如果你在手机上没看到居中，不是写错了，而是 container 还没触发响应式宽度逻辑。
为什么加了 container 仍不居中？常见硬性约束
即使屏幕宽度超过 sm，container 也可能“不居中”，根本原因是它依赖父级提供可计算的水平空间。以下情况会让 mx-auto 失效：
立即学习“前端免费学习笔记（深入）”；
- 父容器是
flex或grid，但没设w-full或min-w-0，导致子元素收缩后宽度不足 - 父容器用了
position: absolute或fixed，脱离文档流后mx-auto无参考系 - 父容器本身被嵌套在未设宽的
div中（比如外层是空 div），审查元素会发现 computed width 是auto或极小值 - 你手动覆盖了
margin-left/margin-right，比如写了ml-4，直接冲掉mx-auto
替代 container 的更可控写法：max-w-md mx-auto
如果你不需要 Tailwind 预设的断点响应逻辑，或者想确保所有尺寸都居中（包括小屏），直接用 max-w-md mx-auto 更直白：
<div class="max-w-md mx-auto px-4 sm:px-6 lg:px-8"> <p>这段文字在所有屏幕下都不超 456px 宽，并水平居中</p> </div>
注意：max-w-md 必须配合 mx-auto 才有效；单独用只会限制宽度、靠左对齐。另外，px-* 是为了防止小屏下文字贴边，不是居中必需，但属于实用配套。
container 和 max-w-* + mx-auto 的关键区别
核心差异不在“能不能居中”，而在“什么时候居中”和“谁控制宽度”：
-
container：宽度由 Tailwind 内置断点表驱动，居中行为是副作用，不可关闭，也不可跨断点统一 -
max-w-md mx-auto：宽度明确、静态、全视口生效，居中逻辑显式且稳定，适合弹窗、卡片、登录框等需要强约束的场景 - 两者都不解决高度问题——垂直居中仍需
flex items-center justify-center min-h-screen或其他方案
真正容易被忽略的，是把 container 当作“万能居中开关”，而没意识到它的响应式宽度逻辑是有条件激活的；一旦父级上下文塌缩，它就退成 w-full，连 mx-auto 都不会应用。
