最简单单行文本居中用 text-align: center 和等高 line-height；多行或不定高用 Flex 布局；兼容旧浏览器用绝对定位加 transform；margin: auto 需四边定位且子元素尺寸固定。

用 text-align 和 line-height 居中单行文本最简单

纯文字居中，尤其是标题或按钮里那一行字，text-align: center 配合固定高度的 line-height 是最快方案。前提是容器高度已知、内容只有一行。

• 如果容器高度是 40px，就设 line-height: 40px，再加 text-align: center
• 多行文本或高度不固定时，line-height 会失效，文字可能被截断或错位
• 注意 line-height 是基于字体大小计算的，不是绝对像素值——如果父元素字体变了，它也会变

Flex 布局实现真正可靠的水平+垂直居中

现代项目首选，兼容性已覆盖所有主流浏览器（IE11+），写法简洁且语义清晰。

• 给父容器加 display: flex、justify-content: center、align-items: center
• 不需要知道子元素尺寸，也不依赖行高，多行文本、图片、甚至空 div 都能居中
• IE11 对 flex 的某些属性支持有 bug，比如 min-height 在 flex 容器里可能不生效
• 如果子元素是 inline 元素（如 span），建议显式设 display: block 避免意外换行

绝对定位 + transform 是老项目里最稳妥的“万金油”

在不支持 Flex 或需要兼容 IE9/10 的场景下，这个组合依然可靠，关键是别漏掉 transform: translate(-50%, -50%)。

anything-to-html

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

下载

• 父容器需设 position: relative，子元素设 position: absolute; top: 50%; left: 50%，再加 transform: translate(-50%, -50%)
• 漏掉 transform 就会偏移一半自身宽高，而不是容器中心
• 如果子元素宽高动态变化（比如响应式文字），这个方法依然有效；但频繁重排会影响性能
• 注意不要和 margin: auto 混用，绝对定位下 margin: auto 在某些旧版浏览器里行为不一致

margin: auto 在绝对定位中只对宽高固定的块级元素有效

很多人试过 position: absolute; margin: auto 却没效果，问题往往出在前提条件没满足。

• 必须同时设置 top、right、bottom、left 四个方向的偏移（哪怕都设为 0）
• 子元素必须有明确的 width 和 height，否则 margin: auto 不会触发居中逻辑
• 这个技巧适合图标、弹窗等尺寸确定的组件，不适合文字内容——因为字号缩放后宽高会变
• 在 Safari 旧版本中，如果父容器没有显式 height，bottom: 0 可能导致计算异常

实际用哪种方法，取决于你手头的浏览器兼容要求、容器是否定高、内容是否动态。Flex 最省心，但碰上 IE9 就得切回 position + transform；而 text-align + line-height 看似简单，一加个响应式字号就容易露馅。