Docs executáveis de HTML: Centralizar texto

Q: Como centralizar um texto no HTML?

Adicione text-align: center ao elemento que contém o texto, por exemplo ou uma regra CSS como h1 { text-align: center; }. Isso centraliza cada linha de texto e o conteúdo inline dentro desse elemento.

Q: Como centralizar texto na vertical?

Transforme o contêiner numa caixa flex: display: flex; align-items: center; (adicione justify-content: center para centralizar também na horizontal). Para uma única linha numa caixa de altura fixa, um line-height igual à altura também funciona.

Q: A tag ainda é válida?

Não. e o atributo align="center" estão obsoletos. Os navegadores ainda os exibem por causa de páginas antigas, mas código novo deve usar text-align: center no CSS.

Q: Como dar recuo a um texto no HTML?

Use CSS. text-indent: 2em recua a primeira linha de um parágrafo, e padding-inline-start: 2em ou margin-inline-start: 2em recua o bloco inteiro. Espaços ou no texto não são um recuo confiável.

Como centralizar texto no HTML

Use a propriedade CSS text-align: center no elemento que contém o texto:

<!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 centraliza cada linha dentro do elemento, inclusive coisas inline como links, imagens e botões. A propriedade é herdada, então defini-la num contêiner centraliza o texto de tudo o que estiver dentro dele.

Coloque no bloco, não no span

text-align funciona em contêineres block: <p>, <div>, títulos, células de tabela. Num <span> ou <a> ela não faz nada, porque um elemento inline tem só a largura do texto e não há espaço para centralizar:

<!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>

A solução é sempre a mesma: leve text-align: center para o bloco pai.

Centralize o bloco, alinhe as linhas à esquerda

Num parágrafo de várias linhas, texto totalmente centralizado é difícil de ler, porque cada linha começa num lugar diferente. Um padrão comum é centralizar o bloco na página e manter o texto alinhado ao início:

<!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 centraliza um bloco que tem largura, text-align centraliza as linhas dentro dele. Centralizar caixas (com flexbox, grid ou margens) é assunto da página como centralizar uma div.

Centralizar texto na vertical

text-align só funciona na horizontal. Para centralizar o texto na vertical dentro de uma caixa, transforme a caixa num contêiner flex:

<!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 centraliza na vertical, justify-content: center centraliza na horizontal, e text-align: center ainda centraliza as linhas entre si quando há mais de uma. O truque do line-height só funciona para uma única linha de texto numa caixa de altura conhecida.

Todos os valores de text-align

Valor	Resultado
`start` (padrão)	As linhas começam na margem inicial: esquerda em português, direita em árabe e hebraico
`end`	As linhas terminam na margem final
`center`	Linhas centralizadas
`justify`	Linhas esticadas até tocar as duas margens (menos a última)
`left`, `right`	Sempre à esquerda ou sempre à direita, seja qual for o idioma

<!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>

Prefira start e end a left e right: eles se invertem automaticamente em idiomas da direita para a esquerda, como mostra a última caixa.

A antiga tag center

Páginas antigas centralizam texto com <center> ou com um atributo align:

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

Os dois estão obsoletos. Os navegadores ainda os exibem para que sites antigos não quebrem, mas são inválidos no HTML atual e misturam layout com a marcação. Use text-align: center no CSS.

Recuo de texto

O HTML não tem tag de recuo, e os espaços digitados são juntados (veja espaço em HTML). Recuo é coisa do 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>

Recuo	CSS
Só a primeira linha	`text-indent: 2em`
O bloco inteiro	`padding-inline-start: 2em` ou `margin-inline-start: 2em`
Deslocado (primeira linha para fora)	`padding-inline-start: 2em; text-indent: -2em`

em liga o recuo ao tamanho da fonte, então ele acompanha o texto.

Erros comuns

text-align num elemento inline. Coloque no bloco pai.
Esperar que text-align centralize uma caixa. Ele centraliza texto e conteúdo inline, não um bloco com largura. Use margin-inline: auto ou flexbox para caixas.
Usar <center> ou align="center". Obsoletos. Use CSS.
Centralizar parágrafos longos. Centralize títulos e linhas curtas; mantenha o texto corrido alinhado ao início.
Recuar com   ou espaços. Use text-indent ou padding.

Perguntas frequentes

Como centralizar um texto no HTML?

Adicione text-align: center ao elemento que contém o texto, por exemplo <p style="text-align: center"> ou uma regra CSS como h1 { text-align: center; }. Isso centraliza cada linha de texto e o conteúdo inline dentro desse elemento.

Por que text-align: center não funciona no meu span?

Um span é inline, então ele tem só a largura do texto e não sobra espaço para centralizar. Coloque text-align: center no bloco pai (o <p> ou a <div> em volta), ou deixe o span com display: block.

Como centralizar texto na vertical?

Transforme o contêiner numa caixa flex: display: flex; align-items: center; (adicione justify-content: center para centralizar também na horizontal). Para uma única linha numa caixa de altura fixa, um line-height igual à altura também funciona.

A tag <center> ainda é válida?

Não. <center> e o atributo align="center" estão obsoletos. Os navegadores ainda os exibem por causa de páginas antigas, mas código novo deve usar text-align: center no CSS.

Como dar recuo a um texto no HTML?

Use CSS. text-indent: 2em recua a primeira linha de um parágrafo, e padding-inline-start: 2em ou margin-inline-start: 2em recua o bloco inteiro. Espaços ou   no texto não são um recuo confiável.

Conceitos relacionados