Docs ejecutables de HTML: Centrar texto

Q: ¿Cómo centro texto en HTML?

Añade text-align: center al elemento que contiene el texto, por ejemplo o una regla CSS como h1 { text-align: center; }. Centra cada línea de texto y el contenido en línea dentro de ese elemento.

Q: ¿Cómo centro texto verticalmente?

Convierte el contenedor en una caja flex: display: flex; align-items: center; (añade justify-content: center para centrar también en horizontal). Para una sola línea en una caja de altura fija, un line-height igual a la altura también funciona.

Q: ¿La etiqueta sigue siendo válida?

No. y el atributo align="center" están obsoletos. Los navegadores todavía los muestran por las páginas antiguas, pero el código nuevo debe usar text-align: center en el CSS.

Q: ¿Cómo pongo sangría a un texto en HTML?

Usa CSS. text-indent: 2em sangra la primera línea de un párrafo, y padding-inline-start: 2em o margin-inline-start: 2em sangran el bloque entero. Los espacios o en el texto no son una sangría fiable.

Cómo centrar texto en HTML

Usa la propiedad CSS text-align: center en el elemento que contiene el 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 centra cada línea dentro del elemento, incluido el contenido en línea como enlaces, imágenes y botones. Se hereda, así que ponerlo en un contenedor centra el texto de todo lo que hay dentro.

Ponlo en el bloque, no en el span

text-align funciona en contenedores de bloque: <p>, <div>, encabezados, celdas de tabla. En un <span> o un <a> no hace nada, porque un elemento en línea solo es tan ancho como su texto y no hay espacio dentro del que centrar:

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

La solución es siempre la misma: mueve text-align: center al bloque padre.

Centrar el bloque, alinear las líneas a la izquierda

En un párrafo de varias líneas, el texto totalmente centrado cuesta de leer porque cada línea empieza en un sitio distinto. Un patrón habitual es centrar el bloque en la página y mantener su texto alineado al inicio:

<!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 centra un bloque que tiene ancho, text-align centra las líneas dentro de él. Centrar cajas (con flexbox, grid o márgenes) se explica en la página de centrar un div.

Centrar texto verticalmente

text-align solo funciona en horizontal. Para centrar texto verticalmente dentro de una caja, convierte la caja en un contenedor 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 centra en vertical, justify-content: center centra en horizontal, y text-align: center sigue centrando las líneas entre sí cuando hay varias. El truco de line-height solo funciona con una línea de texto en una caja de altura conocida.

Todos los valores de text-align

Valor	Resultado
`start` (por defecto)	Las líneas empiezan en el borde inicial: la izquierda en español, la derecha en árabe y hebreo
`end`	Las líneas terminan en el borde final
`center`	Líneas centradas
`justify`	Líneas estiradas hasta tocar los dos bordes (salvo la última)
`left`, `right`	Siempre a la izquierda o siempre a la derecha, sea cual sea el 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>

Es mejor start y end que left y right: se invierten automáticamente en los idiomas de derecha a izquierda, como muestra la última caja.

La antigua etiqueta center

Las páginas antiguas centran texto con <center> o con un atributo align:

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

Los dos están obsoletos. Los navegadores todavía los muestran para que los sitios antiguos no se rompan, pero no son válidos en el HTML actual y mezclan el diseño con el marcado. Usa text-align: center en el CSS.

Sangrar texto

HTML no tiene una etiqueta de sangría, y los espacios escritos se juntan (consulta espacios en HTML). Las sangrías son 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>

Sangría	CSS
Solo la primera línea	`text-indent: 2em`
Todo el bloque	`padding-inline-start: 2em` o `margin-inline-start: 2em`
Francesa (la primera línea sobresale)	`padding-inline-start: 2em; text-indent: -2em`

em liga la sangría al tamaño de letra, así que escala con el texto.

Errores comunes

text-align en un elemento en línea. Ponlo en el bloque padre.
Esperar que text-align centre una caja. Centra el texto y el contenido en línea, no un bloque con ancho. Usa margin-inline: auto o flexbox para las cajas.
Usar <center> o align="center". Obsoletos. Usa CSS.
Centrar párrafos largos. Centra encabezados y líneas cortas; deja el texto principal alineado al inicio.
Sangrar con   o espacios. Usa text-indent o padding.

Preguntas frecuentes

¿Cómo centro texto en HTML?

Añade text-align: center al elemento que contiene el texto, por ejemplo <p style="text-align: center"> o una regla CSS como h1 { text-align: center; }. Centra cada línea de texto y el contenido en línea dentro de ese elemento.

¿Por qué text-align: center no funciona en mi span?

Un span es en línea, así que solo es tan ancho como su texto y no hay espacio dentro del que centrar. Pon text-align: center en el bloque padre (el <p> o <div> que lo rodea), o convierte el span en display: block.

¿Cómo centro texto verticalmente?

Convierte el contenedor en una caja flex: display: flex; align-items: center; (añade justify-content: center para centrar también en horizontal). Para una sola línea en una caja de altura fija, un line-height igual a la altura también funciona.

¿La etiqueta <center> sigue siendo válida?

No. <center> y el atributo align="center" están obsoletos. Los navegadores todavía los muestran por las páginas antiguas, pero el código nuevo debe usar text-align: center en el CSS.

¿Cómo pongo sangría a un texto en HTML?

Usa CSS. text-indent: 2em sangra la primera línea de un párrafo, y padding-inline-start: 2em o margin-inline-start: 2em sangran el bloque entero. Los espacios o   en el texto no son una sangría fiable.

Conceptos relacionados