父容器宽度塌缩导致图片偏移，表现为图片贴边、居中失效或父容器宽为0px；根源是父容器无宽度，常见于浮动子元素、绝对定位或未触发BFC；解决方式包括显式设置max-width等。
父容器宽度塌缩导致图片偏移的典型表现
图片缩放后向左/右贴边、居中失效，甚至整个父容器在开发者工具里显示为 0px 宽——这不是图片样式写错了，而是父容器本身“没宽度”。常见于：div 里只放了浮动子元素、position: absolute 图片、或内部清除了浮动但没触发 BFC。此时 max-width: 100% 实际参照的是视口宽度，而非你预期的“内容区宽度”。
给父容器加明确宽度上下文的实操方式
不靠猜，直接锁定父容器是否具备可计算宽度。以下任一方式都能破局：
- 显式设
max-width: 1200px（或90vw） +，适用于固定宽度布局</li> <li>用 <code>width: 100%
配合box-sizing: border-box，确保 padding 不撑宽 - 若父容器是 flex 或 grid 子项，加
flex-shrink: 0防止被压缩到 0 - 清除浮动后加
overflow: hidden或display: flow-root触发 BFC，恢复宽度计算
为什么 text-align: center 在父容器塌缩时也失效
text-align: center 看似简单，但它依赖父容器有“可渲染的行框宽度”。如果父容器塌缩为 0px，那它的“文本行”也就没了基准，图片自然漂移。这不是 bug，是 CSS 渲染逻辑使然。验证方法：在开发者工具里选中父容器，看 computed width 是否为 0。如果是，text-align 就只是摆设。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
Flex 布局下父容器高度塌缩连带影响居中的真实链路
很多人写了 display: flex; justify-content: center; align-items: center 却发现图片只水平居中、垂直贴顶——根本原因是父容器高度塌缩，align-items: center 没空间可居中。它不像 margin: auto 那样会静默失败，而是“认真执行”却无效果。必须配 min-height: 400px 或 height: 100vh，且确认该容器不是 position: absolute 或 float 的后代（否则脱离文档流，高度无法继承）。
立即学习“前端免费学习笔记（深入）”；
真正卡住人的地方，从来不是“怎么写居中”，而是“谁来提供那个可测量的上下文”。父容器一旦宽度或高度不可计算，所有居中逻辑都会降级为无效声明——这点在嵌套较深或使用第三方组件时尤其隐蔽。
