How to Center Text in Markdown

Quick Answer

Markdown has no built-in centering syntax. Standard Markdown and CommonMark do not include any text alignment features. To center text, you need inline HTML. The most reliable method is the align attribute:

<div align="center">

**This text is centered**

</div>

This works on GitHub, GitLab, Bitbucket, and most Markdown processors that support inline HTML. Below are all 4 methods, with tradeoffs and platform compatibility for each.

Method 1: div align="center"

The <div align="center"> approach is the most portable. It works on platforms that strip CSS styles (like GitHub) because align is an HTML attribute, not a CSS property.

<div align="center">

Centered paragraph text

</div>

Important: leave a blank line between the <div> tags and your content. Without the blank lines, most Markdown processors treat the content as raw HTML and skip Markdown rendering — so **bold** and [links](url) inside the div will not work.

<div align="center">

**Bold**, *italic*, and [links](https://example.com) all work inside the div

</div>

You can also use <p align="center"> for single-line content. This does not require blank lines but only works for a single paragraph:

<p align="center">Single line of centered text</p>

Method 2: The <center> Tag

The HTML <center> tag is deprecated in HTML5, but it still works in every major browser and many Markdown processors. It is the simplest syntax of all the methods.

<center>Centered with the center tag</center>

Downside: GitHub strips the <center> tag entirely from rendered Markdown. If your primary audience reads your files on GitHub, use Method 1 instead. GitLab, Bitbucket, and most desktop Markdown apps support it.

Method 3: Inline CSS

If your Markdown processor allows style attributes (many do, but GitHub does not), you can use text-align: center directly:

<p style="text-align: center;">Centered with inline CSS</p>

Warning: GitHub, GitLab, and many web-based Markdown renderers strip style attributes for security reasons. This method only works reliably in local Markdown apps (MDViewer, Typora, Obsidian, VS Code) and self-hosted documentation sites where you control the sanitization rules.

Method 4: Custom CSS Class

If you control the CSS of the page where the Markdown is rendered (documentation sites, blogs, wikis), define a CSS class and apply it with an HTML attribute:

/* In your stylesheet */
.centered { text-align: center; }

/* In your Markdown */
<div class="centered">

Your centered content here

</div>

This is the cleanest approach for documentation sites built with MkDocs, Docusaurus, Jekyll, or Hugo. It does not work on GitHub or GitLab READMEs because you cannot add custom stylesheets there.

Center Images in Markdown

Centering images is one of the most common use cases. Wrap the image in a <div align="center"> or <p align="center">:

<p align="center">
  <img src="screenshot.png" alt="App screenshot" width="600">
</p>

For Markdown image syntax, use a <div> with blank lines so the Markdown ![]() syntax is processed:

<div align="center">

![App screenshot](screenshot.png)

</div>

Both approaches work on GitHub. The HTML <img> version gives you more control — you can set width, height, and other attributes directly.

Center Headings in Markdown

To center a heading, use the align attribute on an HTML heading tag:

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

Note that this uses an HTML heading, not Markdown ## syntax. You cannot center a Markdown heading with <div align="center"> around ## Heading — most processors do not apply alignment to headings parsed from Markdown syntax inside a div.

A common pattern for GitHub profile READMEs is centering the top heading and a tagline:

<h1 align="center">Project Name</h1>
<p align="center">A short description of the project</p>

Platform Compatibility

Not every method works on every platform. Here is what actually renders on each:

Bottom line: if your Markdown is read on multiple platforms, <div align="center"> is the only method that works everywhere. Use it as your default.

Common Mistakes

Missing blank lines inside div

Without blank lines, Markdown syntax inside the div is not processed. This is the most common mistake:

<!-- ❌ Wrong — no blank lines -->
<div align="center">
**This bold will NOT render**
</div>

<!-- ✅ Correct — blank lines around content -->
<div align="center">

**This bold WILL render**

</div>

Using style on GitHub

GitHub strips all style attributes from rendered Markdown. If you write <p style="text-align: center;"> in a GitHub README, the text renders left-aligned. Use align="center" instead.

Forgetting the closing tag

An unclosed <div align="center"> centers everything below it until the end of the document. Always close your tags.

FAQ

How do I center text in Markdown?

Markdown has no native centering syntax. The most reliable method is wrapping text in <div align="center"> with blank lines around the content. This works on GitHub, GitLab, Bitbucket, and most Markdown processors that support inline HTML.

Does Markdown support text alignment?

No. Standard Markdown and CommonMark have no alignment features. You must use inline HTML to align text. The align attribute is the safest option because it works on platforms that strip CSS styles. For side-by-side content layout, see the Markdown Columns guide.

Can I center an image in Markdown?

Yes. Wrap the image in <p align="center"><img src="..." alt="..."></p>. You can also use <div align="center"> with a blank line before the Markdown ![]() image syntax. Both work on GitHub.

Preview Your Markdown with MDViewer

MDViewer is a native macOS app for reading and previewing Markdown files. It renders centered text, images, tables, and all HTML-in-Markdown patterns instantly. Open any .md file from Finder with a double-click. Lite is free; Pro adds editing, Git history, and PDF export.

Requires macOS 13.0 or later. Intel and Apple Silicon.