最稳的跨设备居中方案是display: flex + justify-content: center + align-items: center，但必须满足父容器有明确高度、图片未脱离文档流、且不被其他布局模式干扰三个硬条件，缺一即失效。

直接用 display: flex + justify-content: center + align-items: center 是最稳的跨设备方案，但必须确保父容器有明确高度、图片未脱离文档流、且不被其他布局模式干扰——漏掉任一条件，垂直居中就会失效。

为什么 text-align: center 在手机上经常“偏了”

它只控制水平方向，且完全依赖父容器宽度是否可靠。移动端常见失效点包括：

• 父容器没设 width: 100% 或被 float / position: absolute 拉窄，导致“可居中空间”不足
• <img> 被意外加上 display: block，脱离了 text-align 的作用范围
• 父容器里混入了 <div> 等块级子元素，它们不受 <code>text-align 影响，却会撑高/撑宽容器，视觉上破坏居中感
• 没加 max-width: 100% 和 height: auto，窄屏下图片溢出，看起来像“居中失败”

display: flex 居中必须满足的三个硬条件

写了 justify-content: center 和 align-items: center 却没效果？问题几乎全出在这三处：

• 父容器没设 display: flex（只给 <img> 加没用）
• 父容器高度塌陷：比如只写了 width: 100%，没设 height 或 min-height → align-items: center 失去垂直参照
• <img> 加了 float、position: absolute 或被外层 grid/inline-block 包裹 → flex 规则被跳过

移动端兼容性与加载闪动问题

iOS 9–11 的 Safari 需要前缀，且图片加载前容器高度为 0，会导致垂直错位：


html-to-pptx-converter
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
下载
• 旧版 Safari 必须加 display: -webkit-flex，否则整个 flex 布局不生效
• 用 min-height 替代 height: 100vh 更稳妥，比如 min-height: 200px，避免图片加载前交叉轴长度为 0
• 别在 上直接加 display: flex，否则所有直系子元素（如多个 <p></p>）都会变成 flex item，布局全乱
• 若需防加载闪动，可在父容器加 min-height 或用 aspect-ratio 占位（支持现代浏览器）

响应式图片尺寸本身不能靠 margin: 0 auto 控制

这个写法对默认 inline 的 <img> 完全无效，强行加只会静默失败：

• 必须先设 display: block，否则 margin: 0 auto 不触发
• 加了 max-width: 100% 后，margin: 0 auto 会因“宽度已占满”而失去作用
• 父容器若已是 flex 或 grid，margin 会被直接忽略
• 它不管垂直方向——即使生效，图片仍贴顶，不是“正中间”

真正容易被忽略的是：跨设备居中的稳定性不取决于图片样式，而取决于父容器是否建立了可缩放、不塌陷、无干扰的布局上下文。哪怕只漏掉一个 min-height，在 iOS 小屏或 Android 低版本上，图片就会突然贴顶。