Markdown Center Text: 4 Methods That Actually Work (2026)

Markdown center text is not possible with native syntax — the CommonMark 0.31.2 specification contains zero mentions of "center", "align", or "alignment" anywhere in the document. Every centering method relies on embedding HTML inside your Markdown file. The most portable approach is <div align="center">, which works on GitHub, GitLab, VS Code, Obsidian, and every major static site generator.

This matters because the wrong method will silently fail on certain platforms. Use style="text-align: center" in a GitHub README and your text renders left-aligned with no warning. Use the <center> tag and GitHub's HTML sanitizer removes it entirely. With 100 million developers on GitHub (Kinsta, 2025) writing READMEs and documentation in Markdown, knowing which centering method works where saves real debugging time.

This guide covers four working methods for centering text in Markdown, with platform-specific compatibility for GitHub, GitLab, VS Code, Obsidian, Hugo, and Jekyll. For a broader overview of all Markdown syntax, the markdown cheat sheet is a useful companion. If you are working with other inline formatting alongside centering, the text formatting guide covers bold, italic, strikethrough, and more.

Why Does Markdown Have No Native Centering Syntax?

Markdown was designed as a lightweight writing format that maps directly to HTML, not as a page layout tool. The CommonMark specification (version 0.31.2, dated January 2024) defines headings, emphasis, links, images, code blocks, and lists — but intentionally omits any alignment or positioning features.

The specification does, however, allow raw HTML blocks (Section 4.6) and inline HTML (Section 6.6). This is why every centering technique in Markdown is actually HTML embedded inside a .md file. The Markdown parser sees the HTML tags, passes them through untouched, and the browser or renderer handles the alignment.

This design choice keeps Markdown simple and portable. Alignment is a visual concern, and different rendering contexts (a terminal, a web page, a PDF export) handle visual layout differently. By deferring to HTML, Markdown lets each platform decide how to handle centering — which is exactly why the question "how do I markdown center text?" leads to four different answers depending on where the file will be rendered.

How Do You Center Text in Markdown? (Method 1: align Attribute)

The align attribute on a <div> or <p> tag is the most reliable way to center text in Markdown across platforms. It works on GitHub, GitLab, VS Code, Obsidian, Hugo, Jekyll, and virtually every Markdown renderer in use today.

<div align="center">
This text is centered.
</div>

Or on a single paragraph:

<p align="center">This text is centered.</p>

Both produce centered text in the rendered output. The <div> version is better when you need to center multiple elements (text, images, badges) as a group. The <p> version works well for a single line.

Why this is the recommended method

The align attribute is the only centering method that works on GitHub. GitHub's HTML sanitizer strips all style attributes and does not include <center> in its allowlist of permitted tags, but explicitly allows the align attribute on all permitted elements including <div>, <p>, <h1>–<h6>, <td>, <th>, and <img> (GitHub Community Discussion #22728).

GitLab uses a similar whitelist-based sanitization filter and also supports the align attribute while stripping style attributes on most elements (GitLab Issue #36098).

The deprecation caveat

The align attribute is technically deprecated in HTML5 — the HTML specification recommends CSS (text-align: center) instead. However, every major browser still supports it for backward compatibility, and GitHub/GitLab explicitly rely on it as the sanctioned centering mechanism. For Markdown files specifically, this is the pragmatic choice: it works everywhere today and is unlikely to break given how deeply it is embedded in millions of README files across GitHub's 630 million+ repositories (Kinsta, 2025).

Does Inline CSS Work for Centering in Markdown? (Method 2: style Attribute)

Inline CSS via the style attribute is the more standards-compliant centering method, but it only works on platforms that do not strip style attributes. It is the cleanest option when you control the rendering environment.

<p style="text-align: center;">This text is centered.</p>

Or with a <div>:

<div style="text-align: center;">This text is centered.</div>

Where it works: VS Code preview, Obsidian (reading view), Jekyll local builds, Hugo local builds, most static site generators, and any renderer that passes HTML through without sanitization (Markdown Land).

Where it does NOT work: GitHub strips all style attributes. GitLab strips style attributes on most elements as a security measure to prevent UI redressing attacks (GitLab Issue #36098). This is the most common centering mistake — testing locally in VS Code where style works, then pushing to GitHub where the centering silently disappears.

If your Markdown files will only ever be rendered in a local tool like VS Code, Obsidian, or a native viewer like MacMD Viewer, inline CSS is perfectly valid and more semantically correct than the align attribute. If there is any chance the file will be viewed on GitHub or GitLab, use align instead.

Should You Use the HTML Center Tag? (Method 3: Deprecated)

The <center> tag still renders in most browsers, but it should not be your centering method for Markdown files. It was deprecated in HTML 4.01, marked obsolete in HTML5, and is actively blocked by GitHub.

<center>This text is centered.</center>

GitHub's HTML sanitization filter blocks the <center> tag — it is not in the allowlist of permitted HTML elements, so it is silently removed and the text renders as a normal left-aligned paragraph (GitHub Community Discussion #22728). GitLab behavior varies depending on the rendering context.

VS Code preview and Obsidian still render <center> correctly because they use browser rendering engines that maintain backward compatibility. But relying on a deprecated tag that is actively blocked by the largest Markdown platform is a poor trade-off. Use <div align="center"> for the same result with better compatibility.

How Do You Use Custom CSS Classes for Centering? (Method 4: CSS)

When you control the CSS of your rendering environment — a blog, documentation site, or note-taking app with custom styles — a CSS class is the cleanest and most maintainable centering approach.

Define the class in your stylesheet:

.center {
  text-align: center;
}

Then apply it in your Markdown:

<div class="center">Centered text</div>

This method works in VS Code (via the markdown.styles setting, VS Code Docs), Obsidian (via CSS snippets in .obsidian/snippets/), Hugo, Jekyll, and any static site generator where you control the CSS.

It does not work on GitHub or GitLab. Both platforms strip class attributes from HTML in Markdown files (GitHub allows id but GitLab strips both).

Platform-specific approaches

Hugo supports custom shortcodes, which is cleaner than raw HTML in content files:

{{%/* center */%}}
This text is centered, and **Markdown** still works inside.
{{%/* /center */%}}

Create the shortcode at layouts/shortcodes/center.html with <div style="text-align: center;">{{ .Inner | markdownify }}</div> (Hugo Discourse). Use {{% %}} (percent delimiters) so inner Markdown content gets processed.

Jekyll with Kramdown supports inline attribute lists — a Kramdown-specific feature:

This text is centered.
{: style="text-align: center;"}

Or with a CSS class:

This text is centered.
{: .text-center}

This syntax is not standard Markdown. It only works with the Kramdown parser (Kramdown Issue #145).

How Do You Center an Image in Markdown?

Standard Markdown image syntax (![alt](url)) cannot be centered without wrapping it in HTML. The image renders inline or as a block depending on the parser, but there is no Markdown-native way to control its horizontal alignment.

The most portable method wraps the image in a centered paragraph:

<p align="center">
  <img src="image.png" alt="Description" width="400">
</p>

For multiple elements (image with a caption), use a <div>:

<div align="center">
  <img src="image.png" alt="Description" width="400">
  <p>Caption text</p>
</div>

Both work on GitHub, GitLab, VS Code, and Obsidian (Codinhood).

If you are working in a CSS-capable environment (not GitHub/GitLab), the CSS display: block; margin: auto pattern also centers images:

<img src="image.png" alt="Description" style="display: block; margin-left: auto; margin-right: auto; width: 50%;">

For a deeper guide on Markdown image syntax, see the table formatting guide which covers alignment of both images and table content.

How Do You Center a Heading in Markdown?

Markdown heading syntax (# Heading) cannot be centered directly. The # characters define the heading level but provide no alignment control. To center a heading, replace the Markdown syntax with an HTML heading tag:

<h1 align="center">Centered Heading</h1>
<h2 align="center">Centered Subheading</h2>

This works on GitHub, GitLab, and all major renderers (Codinhood). In CSS-capable environments, use the style attribute instead:

<h2 style="text-align: center;">Centered Subheading</h2>

The trade-off is readability. Markdown headings (## My Section) are easy to scan in the source file. HTML headings (<h2 align="center">My Section</h2>) are verbose. Only center headings when the visual layout genuinely requires it — a project title in a README, for example.

How Do You Center a Table in Markdown?

Table centering in Markdown has two distinct problems that are often confused: centering the content inside table cells, and centering the entire table on the page.

Centering cell content (native Markdown)

The colon syntax in the separator row controls column alignment. This is supported by GitHub Flavored Markdown and most renderers (GitHub Docs):

| Left | Center | Right |
|:-----|:------:|------:|
| L    |   C    |     R |

The :---: pattern centers that column's content within each cell. :--- aligns left, ---: aligns right.

Centering the entire table on the page

No native Markdown syntax exists for this. On GitHub, wrap the table in a centered <div> with blank lines before and after the Markdown table:

<div align="center">
 
| Header 1 | Header 2 |
|----------|----------|
| Cell 1   | Cell 2   |
 
</div>

The blank lines are critical. Without them, GitHub treats the content inside the <div> as raw HTML rather than Markdown, and the table syntax is not parsed (GitHub Docs Issue #3331).

What Works Where? Quick Compatibility Reference

Not every method works on every platform. This table summarizes the behavior based on verified testing:

Sources: GitHub Community Discussion #22728, GitLab Flavored Markdown Docs, VS Code Markdown Docs.

Key takeaway: If you need a single method to markdown center text that works everywhere, align="center" is the only safe choice. If you control the rendering environment, prefer CSS-based approaches for better standards compliance.

Common Mistakes When Centering Text in Markdown

Knowing how to markdown center text is only half the battle — avoiding these common errors is the other half. These are the most frequent centering mistakes, drawn from platform documentation and community discussions:

Mistake 1: Using style on GitHub

<!-- Breaks on GitHub — style is stripped -->
<p style="text-align: center;">Centered text</p>
 
<!-- Works on GitHub — align is preserved -->
<p align="center">Centered text</p>

GitHub strips all style attributes for security. There is no warning or error — the attribute is silently removed and the text renders left-aligned.

Mistake 2: Forgetting blank lines inside HTML blocks

When wrapping Markdown content inside an HTML tag on GitHub:

<!-- WRONG — Markdown inside div is not parsed -->
<div align="center">
| Header 1 | Header 2 |
|----------|----------|
| Cell 1   | Cell 2   |
</div>
 
<!-- CORRECT — blank lines trigger Markdown parsing -->
<div align="center">
 
| Header 1 | Header 2 |
|----------|----------|
| Cell 1   | Cell 2   |
 
</div>

Without blank lines, the Markdown table syntax is treated as raw text and rendered literally.

Mistake 3: Confusing cell alignment with table alignment

The :---: colon syntax centers content within a column's cells. It does not move the table itself to the center of the page. These are two separate layout problems requiring two separate solutions.

Mistake 4: Using the deprecated center tag

The <center> tag is not in GitHub's HTML allowlist and is deprecated in HTML5. Any centering that relies on it will break when the file is viewed on GitHub — which, given GitHub hosts 630 million+ repositories (Kinsta, 2025), is a likely scenario.

How to Preview Centered Markdown Before Publishing

Testing your centered content before pushing to GitHub or publishing to a website prevents the silent failures described above. Several tools render Markdown with full HTML support:

• VS Code built-in preview: supports all centering methods including inline CSS and <style> blocks.
• Obsidian reading view: supports align and style attributes, plus custom CSS snippets.
• MacMD Viewer: a native macOS Markdown viewer ($19.99) that renders CommonMark with full HTML pass-through, syntax highlighting, and Mermaid diagrams. Useful for checking that your HTML centering renders correctly before committing.

For Markdown formatting beyond centering — bold, italic, underline, and strikethrough — each has its own syntax rules and cross-platform differences.

The markdown center text problem is ultimately an HTML problem. No amount of Markdown syntax will center your text — you need to know which HTML attributes survive each platform's sanitizer. Start with <div align="center"> as your default, switch to CSS when you control the rendering, and always test on the platform where your readers will see the final result.

Ready to preview your Markdown files with full formatting on macOS? Download MacMD Viewer — native rendering, instant preview, no subscription.