anything-to-html

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

下载

text-align: center 可使 inline 和 inline-block 元素在父容器内水平居中，如 span、img、a 等；对块级元素无效，需配合 width + margin: 0 auto 或 flex 布局实现居中。

用 text-align: center 居中 inline 元素最简单

如果子元素是 <span></span>、<img>（未设 display: block）、<a></a> 这类默认 inline 的元素，父容器加一行 CSS 就够：

parent { text-align: center; }

它只对 inline 和 inline-block 子元素生效，不改变块级元素的布局流。别指望它让 <div> 或 <code><p></p> 居中——它们会撑满父宽，text-align 对它们没用。

块级子元素必须用 margin: 0 auto

对 <div>、<code><section></section> 这类块级元素，得靠自动外边距：

child { width: 200px; margin: 0 auto; }

关键点有三个：子元素必须有明确的 width（或 max-width），不能是 auto；不能是 float 或 position: absolute；父容器不能是 text-align: center 混用——那只是干扰项。漏掉 width，这行代码就完全无效。

Flex 布局一行解决所有情况

真正“一行搞定”的通用解法是 Flex：

parent { display: flex; justify-content: center; }

它无视子元素的 display 类型，inline、block、甚至 position: absolute 的元素都能居中（只要不是 display: none）。但要注意：父容器必须是 flex 容器，子元素的 margin: auto 在 flex 里也有效，但 justify-content: center 更直观可靠。兼容性上，IE10+ 支持，但 IE10/11 对 flex-wrap 和某些属性有 bug，纯居中场景基本没问题。

千万别用 left: 50% + transform 模拟居中

这种写法常被误当作“一行”：

child { position: relative; left: 50%; transform: translateX(-50%); }

它实际依赖两个声明，且会让元素脱离文档流，可能影响父容器高度计算、兄弟元素布局，还容易和 top/right 冲突。除非你明确需要绝对定位，否则没必要绕这个弯——flex 或 margin: 0 auto 更直接、更可控。