anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
margin: 0 auto 对 img 无效是因为其默认 inline 显示，需同时满足：block/inline-block、明确宽度、父容器非 flex/grid；text-align:center 须作用于父容器且其宽度正常；flex 居中需父设 display:flex 且高度不塌陷。
为什么 margin: 0 auto 对 <img> 完全没反应
根本不是 CSS 写错了，而是 <img> 默认是 display: inline，而 margin: auto 对行内元素水平方向静默忽略。必须同时满足三个条件才可能生效：
-
display: block或display: inline-block（改显示模式） - 图片有可计算的宽度：比如
width: 300px；max-width: 100%不行，浏览器无法推导“剩余空间” - 父容器不能是
display: flex或display: grid——它们会接管 margin 行为
常见翻车：<img src="x.jpg" style="max-width:90%"> → 依然靠左，因为 max-width 不提供确定宽度。
text-align: center 看似写了却居中失败
这个属性只作用于父容器，且只影响其内部的行内级子元素（<img> 符合），但极易被上下文干扰：
- 写在
<img>自身上（如style="max-width:90%"）→ 完全无效 - 父容器用了
float、position: absolute或display: inline-block→ 脱离文档流或宽度不可预测，居中基准丢失 - 父容器本身宽度塌缩（比如空
<div> 且无内容/高度）→ 实际宽度为 0，图片只能贴左 <li>父容器里混了 <code><div>、<code><p></p>等块级子元素 → 它们不受text-align影响，可能把图片视觉上“挤偏”Flex 布局中
justify-content: center和align-items: center失效写了两行却没居中？大概率卡在以下任一硬伤：
- 父容器没设
display: flex（只给<img>加没用） - 父容器高度塌陷：没设
height、min-height或aspect-ratio→align-items: center在 0 高度空间里无从生效，图片必然贴顶 -
<img>自身加了float或position: absolute→ 元素脱离 flex 流，规则直接跳过 - 父容器是
且直接加display: flex→ 所有直系子元素（如多个<p></p>）都变成 flex item，布局全乱
响应式下图片“看起来偏了”，其实不是居中逻辑错
桌面正常、手机偏移，90% 是渲染上下文变化导致的假性失效：
- 缺失
<meta name="viewport" content="width=device-width, initial-scale=1.0">→ 页面以桌面宽度渲染后再缩放，视口计算错乱 - 父容器用了
padding但没设box-sizing: border-box→ 实际内容宽度小于预期，居中基准偏移 - 父容器设了
max-width: 1200px却没配margin: 0 auto→ 小屏下自身不居中，子图自然也偏 - 图片
max-width: 100%但原始尺寸超父容器 → 视觉上“卡在左边”，实际是溢出而非未居中；需加overflow: hidden或限制父容器max-width
真正难的从来不是“怎么写居中”，而是确认浏览器是否真的算出了那个“可居中的空间”——它藏在父容器的高度、宽度、定位和文档流状态里，稍有遗漏，样式就停在代码里不动。
- 父容器没设
