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 嵌入的說明