Markdown 居中文本：6 种方法与跨平台兼容性指南
先说一个可能会让新手意外的结论：Markdown 本身没有原生的居中语法。John Gruber 在 2004 年设计 Markdown 时，关注的是"易读易写的纯文本格式"，文本对齐这种排版需求被排除在了设计目标之外。
所以你在搜索 "markdown center text" 或 "markdown 居中" 时能找到的所有方案，本质上都是在 Markdown 里嵌入 HTML。虽然听起来有点绕，但实际操作并不复杂，下面我按场景逐一说明。
方法一：<center> 标签（最简单，但不推荐长期使用）
这是网上出现频率最高的写法：
<center>这段文字会居中显示</center>渲染效果就是文字在页面中间显示，一目了然。支持多行内容，也支持包裹图片、标题等其他元素。
但我得说清楚一件事：<center> 标签在 HTML5 中已经被废弃了。它最早出现在 HTML 3.2 时代，被归类为"presentational HTML"——纯粹控制外观的标签。现代 Web 标准推荐把样式交给 CSS 处理，而不是用 HTML 标签来控制。
不过"废弃"不等于"不能用"。目前所有主流浏览器和 Markdown 渲染器仍然支持 <center>，短期内也不会停止支持。如果你的文档只是内部使用或者临时用途，用 <center> 完全没问题。
<center>
## 居中的标题
居中的正文内容，可以是多行。
</center>注意 <center> 标签和内容之间留空行，避免某些渲染器解析异常。
方法二：<p align="center">（GitHub 用户首选）
<p align="center">这段文字会居中显示</p>如果你主要在 GitHub 上写 README，这个写法比 <center> 更靠谱。原因在于 GitHub 的 Markdown 渲染器会对 HTML 做安全过滤——style 属性会被直接移除，但 align 属性不会被过滤。
这个规律很多人不知道。有一次我帮同事排查 GitHub README 居中失效的问题，他用了 <p style="text-align:center">，本地 Typora 预览一切正常，推到 GitHub 后死活不居中。排查了半天才发现是 GitHub 把 style 属性给过滤了，换成 align="center" 就好了。
align 属性对标题同样适用：
<h3 align="center">居中的三级标题</h3>顺便说一句，align 属性在 HTML5 中也是废弃的，和 <center> 一样的处境。但在 GitHub 环境下，它是目前最稳定的居中方案。
方法三：<div> 或 <p> + CSS（最规范的做法）
<div style="text-align: center;">
这段文字会居中显示
</div>或者用 <p> 标签：
<p style="text-align: center;">居中的文字</p>这是现代 Web 标准推荐的做法——用 CSS 控制样式，HTML 只负责结构。如果你写的文档最终会通过静态站点生成器（Hugo、Jekyll、Docusaurus 等）渲染，这种写法的兼容性最好，因为这些工具通常不会过滤 style 属性。
一个容易踩的坑：<span> 标签上写 text-align: center 是不生效的。text-align 只对块级元素有效，而 <span> 是行内元素。需要居中的文字要用 <p> 或 <div> 这种块级标签包裹。
<!-- ❌ 不生效 -->
<span style="text-align: center;">这不会居中</span>
<!-- ✅ 正确写法 -->
<div style="text-align: center;">这会居中</div>之前我在一个项目里用 <span> 包裹居中文本，本地编辑器里看着正常（有些编辑器会自行修正），部署到线上后全乱了。之后养成了习惯：需要居中就用 <div> 或 <p>，绝不碰 <span>。
方法四：表格冒号语法（Markdown 原生，但仅限表格内容）
这是唯一不需要写 HTML 的"居中"方式，但只适用于 Markdown 表格的列内容对齐：
| 左对齐 | 居中对齐 | 右对齐 |
| :--- | :---: | ---: |
| 内容1 | 内容2 | 内容3 |
| 内容4 | 内容5 | 内容6 |第二列的 :---: 语法会让该列内容居中显示。不过要注意，这是表格单元格内部的对齐，和整段文字的居中是两码事。有些教程把这两个概念混在一起说，容易让初学者困惑。
如果你需要的是"表格本身在页面中居中"（而不是表格内容居中），还是得回到 HTML 方案：
<div align="center">
| 名称 | 说明 |
| --- | --- |
| 项目A | 描述A |
| 项目B | 描述B |
</div>图片居中的几种做法
图片居中比文本居中更常见，但也更容易出问题，因为 <img> 是行内元素，直接用 text-align 不一定生效。这里单独说明几种方案。
方案 A：<div> 包裹（通用性最好）
<div align="center">
<img src="image.png" alt="图片描述">
</div>这个写法在 GitHub、GitLab、Typora 上都测试过，表现稳定。推荐用 align="center" 而不是 style="text-align:center"，因为前面说的 GitHub style 过滤问题对图片同样适用。
方案 B：<img> 加 CSS（精确控制）
<img src="image.png" alt="图片描述" style="display: block; margin: auto;">把 <img> 从行内元素变成块级元素，然后用 margin: auto 实现水平居中。这个方法的好处是可以和图片尺寸控制配合使用：
<img src="image.png" alt="图片描述" style="display: block; margin: auto; width: 60%;">不过在 GitHub 上这个方法不适用（style 被过滤），在 Typora、VS Code 预览和静态站点中则正常工作。
方案 C：Markdown 图片语法 + 外层居中
如果你不想写太多 HTML，可以用原生 Markdown 图片语法配合外层的 <div> 或 <center>：
<div align="center">
</div>简洁，但要注意某些渲染器可能不支持在 <div> 内部解析 Markdown 语法。
跨平台兼容性速查表
我实际测试了几种主要写法在不同平台上的表现：
| 写法 | GitHub | GitLab | Typora | VS Code 预览 | Hugo/Jekyll |
|---|---|---|---|---|---|
<center> | ✅ | ✅ | ✅ | ✅ | ✅ |
<p align="center"> | ✅ | ✅ | ✅ | ✅ | ✅ |
<div align="center"> | ✅ | ✅ | ✅ | ✅ | ✅ |
<p style="text-align:center"> | ❌ | ✅ | ✅ | ✅ | ✅ |
<div style="text-align:center"> | ❌ | ✅ | ✅ | ✅ | ✅ |
<img style="margin:auto"> | ❌ | ✅ | ✅ | ✅ | ✅ |
#pic_center（图片） | ❌ | ❌ | ❌ | ❌ | ❌ |
说明一下几个关键发现：
- GitHub 过滤所有
style属性，这是 GitHub 的 HTML sanitizer 的安全策略，不是 bug - CSDN 的
#pic_center是 CSDN 编辑器的私有扩展，其他平台完全不支持 - Typora 和 VS Code 预览基本支持所有写法，因为它们使用的是本地渲染引擎，不做 HTML 过滤
- Hugo/Jekyll 等静态站点生成器通常保留完整的 HTML，所以所有写法都可以用
怎么选：快速决策指南
说了这么多方法，直接帮你简化选择：
如果你在 GitHub / GitLab 写 README：→ 用 <p align="center"> 或 <div align="center">，不用 style
如果你用 Typora / Obsidian 写本地笔记：→ 用 <div style="text-align: center;">，规范且不受限
如果你用 Hugo / Jekyll / Docusaurus 建站：→ 同上，用 CSS 方案，和你的站点主题样式配合最灵活
如果你需要在 CSDN 发文章：→ 图片可以直接用 ，文本用 <center> 即可
如果你不确定会在哪个平台渲染：→ <div align="center"> 是兼容性最广的折中选择
说实话，Markdown 居中这事儿没几行代码，但坑全在"哪个平台支持哪种写法"上。记住一条就够了：GitHub 用 align，其他用 style，别碰 <span>。
常见问题
Markdown 原生能不能居中？
不能。Markdown 规范中没有文本对齐的语法。所有居中方案本质上都是嵌入 HTML。这不是某个渲染器的 bug，而是 Markdown 的设计哲学——它关注内容结构而非排版样式。
为什么 <center> 不好但我还是经常看到？
两个原因：一是它写起来最简单，只有一行；二是浏览器至今仍然支持它。"废弃"在 HTML 世界里并不意味着"立刻失效"，只是不推荐新项目使用。短期内你完全可以用它，但长期维护的文档建议迁移到 CSS 方案。
多行文字怎么一起居中？
用 <div> 包裹多行内容：
<div align="center">
第一行文字
第二行文字
第三行文字
</div>注意每行之间保持空行，否则某些渲染器会把多行合并为一行。
标题可以居中吗？
可以，用 <h1> 到 <h6> 的 HTML 标签加 align 属性：
<h2 align="center">居中的标题</h2>但不要在 <div> 内部再用 Markdown 的 ## 语法写标题，某些渲染器不会在 HTML 标签内部解析 Markdown 语法。
参考来源
- Markdown Guide — Hacks — 官方指南中关于居中的 hack 方法说明
- GitHub Docs — Markdown 中的 HTML — GitHub 对 HTML 过滤策略的官方说明
- MDN Web Docs —
<center>元素 — 废弃标签的官方说明 - Stack Overflow — Markdown native text alignment — 社区验证的多方案对比
- CommonMark Spec — Markdown 规范中关于 HTML 嵌入的说明