anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

justify-content: center只控制主轴（默认水平）对齐，垂直居中必须配合align-items: center（控制交叉轴，默认垂直），且二者须作用于启用display: flex的父容器，并确保父容器有明确高度（如min-height: 100vh）。

justify-content: center只管水平方向，垂直居中必须配align-items

很多人写了 justify-content: center 发现图片还是贴顶，根本原因是它只控制主轴（默认是水平轴），对垂直位置完全没影响。要真正“居中”，必须同时加 align-items: center——它才负责交叉轴（默认是垂直轴）的对齐。

这两个声明必须写在**父容器**上，不是 <img> 自身；而且只有当父容器启用了 display: flex 时，它们才生效。

• justify-content: center 对应水平居中，align-items: center 对应垂直居中，缺一不可
• 如果只想要水平居中（比如图文混排时文字在左、图在右居中），可以只用 justify-content，但别指望它拉高图片
• 旧 Android（4.4 及以下）需补 display: -webkit-flex 和对应前缀，否则整套失效

父容器高度塌陷是justify-content失效的最常见原因

align-items: center 需要一个可计算的交叉轴尺寸才能工作。如果父容器高度是 auto 或未设任何高度约束，浏览器就认为“垂直空间为 0”，图片自然贴顶。

正确做法是给父容器明确的高度上下文：

• 视口级居中：用 height: 100vh（严格占满一屏）或更安全的 min-height: 100vh（允许内容撑高）
• 内容区居中：用 min-height: 400px 这类固定值，避免小图下留大片空白
• 别直接在 上设 display: flex——它会让所有直系子元素（如多个 <p></p>）都变成 flex item，破坏原有文档流

图片自身尺寸失控会破坏justify-content的居中效果

即使容器 flex 正确、高度明确，如果图片宽高没约束，它可能溢出、拉伸、甚至把容器撑变形，导致视觉上“偏了”。

关键控制点有三个，必须一起写：

• max-width: 90vw（留边距，避免宽屏下顶到边缘）
• max-height: 80vh（防大图撑高容器）
• width: auto; height: auto（让浏览器按原始比例缩放，不强制拉伸）
• 错误写法：width: 100% —— 它会无视原始比例强行拉宽，破坏响应性

嵌套容器里justify-content容易被中间层覆盖

在多层 <div> 嵌套中，只要某一层用了 <code>float、position: absolute、display: grid 或 display: inline-flex，就会打断 flex 继承链，导致内层 justify-content 失效。

典型翻车现场：

• 图片突然飘到左上角 → 中间某层加了 position: relative，而图片被误加 position: absolute
• 水平居中了但垂直仍贴顶 → 中间容器高度为 auto 且无内容撑开，没传高度下去
• 多张图片堆叠错位 → 某个包裹层用了 display: grid，覆盖了外层 flex 行为
• 解决办法：保持图片始终是普通子元素，不加 float、不加 position、不手动设 margin，所有对齐逻辑交给最外层 flex 容器

真正卡住人的地方往往不是语法写错，而是某一层容器悄悄“截胡”了 flex 上下文，或者高度没传下来——调试时优先检查父容器是否真的渲染出了高度，以及中间有没有脱离文档流的样式干扰。