Runnable HTML Docs: Center Text

Q: How do I center text in HTML?

Add text-align: center to the element that contains the text, for example or a CSS rule like h1 { text-align: center; }. It centers every line of text and inline content inside that element.

Q: How do I center text vertically?

Make the container a flex box: display: flex; align-items: center; (add justify-content: center to center horizontally too). For a single line in a box of fixed height, line-height equal to the height also works.

Q: Is the tag still valid?

No. and the align="center" attribute are obsolete. Browsers still render them for old pages, but new code should use text-align: center in CSS.

Q: How do I indent text in HTML?

Use CSS. text-indent: 2em indents the first line of a paragraph, and padding-inline-start: 2em or margin-inline-start: 2em indents the whole block. Spaces or in the text are not a reliable indent.

How to center text in HTML

Use the CSS property text-align: center on the element that holds the text:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center text</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 { text-align: center; }
    .center { text-align: center; }
  </style>
</head>
<body>
  <h1>A centered heading</h1>
  <p class="center">This paragraph is centered with a class.</p>
  <p style="text-align: center">This one uses an inline style.</p>
  <p>This paragraph is not centered.</p>
</body>
</html>

text-align centers every line inside the element, including inline things such as links, images and buttons. It is inherited, so setting it on a container centers the text in everything inside it.

Put it on the block, not the span

text-align works on block containers: <p>, <div>, headings, table cells. On a <span> or <a> it does nothing, because an inline element is only as wide as its text and there is no space to center within:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-align on inline</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div { border: 2px solid #e5e7eb; margin-bottom: 8px; padding: 4px; }
    .on-span span { text-align: center; background: #fef3c7; }
    .on-div { text-align: center; border-color: #16a34a; }
    .on-div span { background: #dcfce7; }
  </style>
</head>
<body>
  <div class="on-span"><span>text-align on the span: no effect</span></div>
  <div class="on-div"><span>text-align on the parent div: centered</span></div>
</body>
</html>

The fix is always the same: move text-align: center to the parent block.

Center text, left-align the lines

For a paragraph of several lines, fully centered text is hard to read because every line starts at a different place. A common pattern is to center the block on the page and keep its text aligned to the start:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Centered column</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .column { max-width: 320px; margin-inline: auto; border: 2px dashed #2563eb; padding: 8px; }
    .column h2 { text-align: center; margin-top: 0; }
  </style>
</head>
<body>
  <div class="column">
    <h2>Centered title</h2>
    <p>This column sits in the middle of the page, but its lines of text start at the same edge, which keeps longer text easy to read.</p>
  </div>
</body>
</html>

margin-inline: auto centers a block that has a width, text-align centers the lines inside it. Centering boxes (with flexbox, grid or margins) is covered on the center a div page.

Center text vertically

text-align only works horizontally. To center text vertically inside a box, make the box a flex container:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical center</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { height: 140px; background: #e5e7eb; border-radius: 8px; margin-bottom: 12px; }
    .flex { display: flex; align-items: center; justify-content: center; text-align: center; }
    .single { height: 60px; line-height: 60px; text-align: center; background: #dbeafe; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="box flex">Centered both ways<br>with flexbox</div>
  <div class="single">One line with line-height</div>
</body>
</html>

align-items: center centers vertically, justify-content: center centers horizontally, and text-align: center still centers the lines relative to each other when there are several. The line-height trick only works for a single line of text in a box of known height.

All text-align values

Value	Result
`start` (default)	Lines start at the start edge: left in English, right in Arabic and Hebrew
`end`	Lines end at the end edge
`center`	Lines centered
`justify`	Lines stretched to touch both edges (except the last line)
`left`, `right`	Always left or always right, whatever the language

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-align values</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    p { width: 260px; border: 2px solid #e5e7eb; padding: 4px; }
  </style>
</head>
<body>
  <p style="text-align: start">start: the default for most text.</p>
  <p style="text-align: end">end: lines hug the end edge.</p>
  <p style="text-align: justify">justify: the spaces between words stretch so every full line reaches both edges of the box.</p>
  <p dir="rtl" style="text-align: start">start in a right to left paragraph</p>
</body>
</html>

Prefer start and end over left and right: they flip automatically for right to left languages, as the last box shows.

The old center tag

Old pages center text with <center> or with an align attribute:

<center>Old way</center>
<p align="center">Also old</p>

Both are obsolete. Browsers still render them so old sites do not break, but they are invalid in current HTML and mix layout into the markup. Use text-align: center in CSS.

Indenting text

HTML has no indent tag, and typed spaces collapse (see HTML space). Indents are CSS:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Indent</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 420px; }
    .first-line { text-indent: 2em; }
    .block { padding-inline-start: 2em; border-inline-start: 3px solid #2563eb; }
    .hanging { padding-inline-start: 2em; text-indent: -2em; }
  </style>
</head>
<body>
  <p class="first-line">text-indent moves only the first line of the paragraph, the way books start a new paragraph. The following lines start at the edge.</p>
  <p class="block">padding-inline-start indents every line of the block.</p>
  <p class="hanging">A hanging indent: the first line sticks out and the rest is indented, as in a bibliography entry.</p>
</body>
</html>

Indent	CSS
First line only	`text-indent: 2em`
Whole block	`padding-inline-start: 2em` or `margin-inline-start: 2em`
Hanging (first line out)	`padding-inline-start: 2em; text-indent: -2em`

em ties the indent to the font size, so it scales with the text.

Common mistakes

text-align on an inline element. Put it on the parent block.
Expecting text-align to center a box. It centers text and inline content, not a block with a width. Use margin-inline: auto or flexbox for boxes.
Using <center> or align="center". Obsolete. Use CSS.
Centering long paragraphs. Center headings and short lines; keep body text aligned to the start.
Indenting with   or spaces. Use text-indent or padding.

Frequently Asked Questions

How do I center text in HTML?

Add text-align: center to the element that contains the text, for example <p style="text-align: center"> or a CSS rule like h1 { text-align: center; }. It centers every line of text and inline content inside that element.

Why does text-align: center not work on my span?

A span is inline, so it is only as wide as its text and there is no room to center within. Put text-align: center on the parent block (the <p> or <div> around it), or make the span display: block.

How do I center text vertically?

Make the container a flex box: display: flex; align-items: center; (add justify-content: center to center horizontally too). For a single line in a box of fixed height, line-height equal to the height also works.

Is the <center> tag still valid?

No. <center> and the align="center" attribute are obsolete. Browsers still render them for old pages, but new code should use text-align: center in CSS.

How do I indent text in HTML?

Use CSS. text-indent: 2em indents the first line of a paragraph, and padding-inline-start: 2em or margin-inline-start: 2em indents the whole block. Spaces or   in the text are not a reliable indent.

Related concepts