Etiqueta HTML <center>
La etiqueta <center> centra el contenido. Su equivalente en CSS es la propiedad text-align. Ver ejemplos.
La etiqueta HTML <center> es obsoleta y no debe usarse en páginas nuevas. Era un elemento de bloque que centraba horizontalmente todo su contenido, pero fue eliminada del estándar HTML y ya no está soportada en HTML5. Los navegadores modernos pueden seguir renderizándola por compatibilidad con versiones anteriores, pero su comportamiento no está garantizado y no pasará la validación.
Esta página explica qué hacía <center> y, lo que es más importante, muestra las técnicas CSS que la reemplazan: text-align: center para contenido en línea, margin: 0 auto para elementos de bloque, y Flexbox para centrar tanto horizontal como verticalmente.
La etiqueta <center> es una etiqueta HTML obsoleta y no está soportada en HTML5. La presentación pertenece a CSS, no al marcado HTML. Usa las técnicas CSS que se muestran a continuación.
La diferencia conceptual: centrado en línea vs. centrado en bloque
Antes de elegir una técnica, decide qué vas a centrar. Esta es la fuente de confusión más frecuente.
- Centrar contenido en línea (texto, imágenes, elementos en línea) dentro de un contenedor: usa
text-align: centeren el contenedor. El contenedor mantiene su anchura completa; solo su contenido se desplaza al centro. - Centrar un elemento de bloque (un
<div>, un<section>, una tarjeta) dentro de su padre: usamargin: 0 autoen el propio bloque. El bloque debe tener una anchura menor que la de su padre; de lo contrario, ya ocupa toda la fila y no hay nada que centrar.
En resumen: text-align centra el contenido dentro de una caja; margin: auto centra la caja en sí misma.
Centrar contenido en línea con text-align
Aplica text-align: center al elemento padre. Las dimensiones del elemento no cambian — solo se centra el contenido que hay dentro.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>This text is aligned to the left.</p>
<p style="text-align:center">And this one is placed in the center.</p>
</body>
</html>Esta es la sustitución directa de <center> cuando solo quieres texto centrado.
Centrar un elemento de bloque con margin: 0 auto
Para centrar horizontalmente un elemento de bloque dentro de su padre, asígnale un width y establece sus márgenes izquierdo y derecho en auto. El navegador distribuirá entonces el espacio horizontal restante de forma equitativa en ambos lados.
margin: 0 auto es la forma abreviada de «0 arriba/abajo, auto izquierda/derecha». Internamente establece los mismos valores de margin-left y margin-right en auto.
El width es obligatorio. Un elemento de bloque sin anchura definida ocupa el 100% de su padre por defecto, sin dejar espacio libre para que los márgenes auto se distribuyan — de modo que nada parece moverse. Una vez que el elemento es más estrecho que su padre, los márgenes auto lo centran.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div style="margin:0 auto; width:50%; background:#eee;">
This block is centered horizontally.
</div>
</body>
</html>Ten en cuenta que margin: auto solo centra horizontalmente — no centra un bloque en sentido vertical.
Centrar en ambas direcciones con Flexbox
Cuando necesitas centrar contenido horizontal y verticalmente al mismo tiempo, Flexbox es la opción moderna y fiable. Convierte el contenedor en un contenedor flex y usa justify-content: center para el eje horizontal y align-items: center para el eje vertical.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div style="display:flex; justify-content:center; align-items:center;
height:200px; border:1px solid #ccc;">
<p>This box is centered both horizontally and vertically.</p>
</div>
</body>
</html>Aquí display:flex convierte el <div> en un contenedor flex, justify-content:center centra sus hijos a lo largo del eje principal (horizontal) y align-items:center los centra a lo largo del eje transversal (vertical). El height está definido para que haya espacio vertical dentro del que centrar.
Para un recorrido completo por estas propiedades y el resto del modelo de maquetación, consulta La guía definitiva de Flexbox.
Cómo era la antigua etiqueta <center>
Solo como referencia — no uses esto en código nuevo. La etiqueta <center> se usaba por pares y centraba todo lo que había entre la etiqueta de apertura y la de cierre:
<p>This text is aligned to the left.</p>
<center>And this one is placed in the center.</center>El marcado moderno equivalente es simplemente <p style="text-align:center">…</p>, tal como se muestra arriba.