Etiqueta center en HTML: obsoleta y centrado con CSS
La etiqueta <center> está obsoleta y no debe usarse en HTML nuevo. Servía para centrar horizontalmente contenido, como un mensaje de bienvenida o un grupo de elementos. Hoy se conserva el HTML que describe ese contenido y se aplica CSS para alinearlo. Esta guía te ayuda a reconocer código antiguo y elegir la técnica de centrado adecuada al migrarlo. El HTML Living Standard incluye <center> entre las funciones que los autores no deben utilizar.
Qué era center y cómo se escribía
Este es un ejemplo histórico, mostrado únicamente como código de referencia:
<center><p>Bienvenido al curso.</p></center>La intención era mostrar «Bienvenido al curso.» centrado horizontalmente dentro del contenedor. <center> era un contenedor de bloque con apertura y cierre, no una etiqueta vacía. En HTML 4 Transitional admitía contenido de flujo, como texto, párrafos, encabezados y otros bloques, allí donde el padre permitía bloques. No correspondía al <head> ni al interior de un párrafo.
HTML 4 ya lo declaraba obsoleto y describía su función como equivalente a un <div> con el antiguo align="center". Esa equivalencia es histórica: tampoco uses align para resolver este problema en una página actual. Puedes consultar la definición de alineación en HTML 4 y su DTD Transitional.
Centrar texto y centrar una caja son decisiones distintas
text-align: center alinea el contenido en línea de un contenedor: el texto y, por ejemplo, una imagen que participa en una línea. No cambia por sí sola el ancho ni la posición de la caja de ese contenedor. Por eso un <div> puede tener el texto centrado y seguir ocupando todo el ancho disponible. Esta es la función que define CSS Text para text-align.
Para centrar una caja de bloque en el flujo normal, usa un ancho que deje espacio libre y margin-inline: auto. Los dos márgenes absorben ese espacio por igual. Si la caja ocupa todo el ancho, no habrá desplazamiento visible. Limitarla con max-width y permitir width: 100% evita imponer un ancho que desborde en un teléfono. Las reglas de ancho y márgenes de CSS y las propiedades lógicas de margen explican este comportamiento. En escritura horizontal, los márgenes del eje en línea son los de izquierda y derecha.
Ejemplo completo de migración con CSS
Guarda este documento como centrado.html y ábrelo en el navegador. Incluye todo el CSS necesario; no necesita JavaScript, imágenes ni un servidor.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tres formas de centrar con CSS</title>
<style>
body {
margin: 0;
padding: 1rem;
font-family: sans-serif;
line-height: 1.5;
}
.bienvenida {
text-align: center;
}
.tarjeta {
box-sizing: border-box;
width: 100%;
max-width: 24rem;
margin-inline: auto;
padding: 1rem;
border: 1px solid #64748b;
}
.zona {
display: grid;
place-items: center;
min-height: 10rem;
margin-block-start: 1.5rem;
padding: 1rem;
background: #e2e8f0;
}
.aviso {
box-sizing: border-box;
max-width: 100%;
padding: 0.5rem 1rem;
overflow-wrap: anywhere;
background: #fff;
}
</style>
</head>
<body>
<h1>Tres formas de centrar</h1>
<p class="bienvenida">Bienvenido al curso.</p>
<div class="tarjeta">
<h2>Taller de HTML</h2>
<p>Aprende a organizar una página con encabezados y párrafos.</p>
</div>
<div class="zona">
<span class="aviso">Próxima sesión: sábado</span>
</div>
</body>
</html>El mensaje de bienvenida queda centrado, la tarjeta tiene un máximo de 24rem y sus márgenes laterales son iguales. Su texto conserva la alineación inicial. En móvil, la tarjeta se estrecha hasta el ancho disponible; box-sizing: border-box incluye su borde y relleno dentro de ese ancho. El aviso queda centrado en ambos ejes dentro de la zona gris.
Para comprobar las diferencias, prueba un ancho de 375 píxeles y otro de 1280. En escritorio, retira margin-inline: auto: la tarjeta pasa al inicio, aunque su texto no cambia. Retira text-align: center: la bienvenida recupera la alineación inicial, pero su caja conserva el ancho. Al quitar todo el CSS, los textos y encabezados siguen apareciendo en el mismo orden.
La migración del ejemplo antiguo solo necesita conservar el <p> y añadirle la clase .bienvenida. Si sustituyes <center> por <div> sin estilos, o eliminas el contenedor, el centrado deja de aplicarse salvo que otra regla CSS lo proporcione. Antes de eliminar un contenedor con id o class, revisa los estilos y scripts que lo utilizan.
Cuándo elegir grid o flex
En el ejemplo, display: grid y place-items: center centran el único hijo dentro de su celda. place-items combina la alineación de los elementos en los dos ejes; la zona tiene altura mínima para que el centrado vertical se vea. Consulta la propiedad place-items.
Para probar flex con el mismo HTML, sustituye las declaraciones display y place-items de .zona por estas; conserva el resto de la regla:
.zona {
display: flex;
justify-content: center;
align-items: center;
}El aviso seguirá centrado. En flex, justify-content actúa en el eje principal y align-items en el transversal. Con la dirección predeterminada de fila y escritura horizontal, son horizontal y vertical; con flex-direction: column intercambian esas direcciones. CSS Flexbox define estos ejes y su alineación. Elige flex para distribuir una fila o columna; grid resulta útil cuando organizas filas y columnas. Ninguna propiedad de centrado sustituye todas esas decisiones.
Atributos, errores frecuentes y accesibilidad
<center> no tenía atributos específicos de centrado en HTML 4: admitía los comunes de su época, como id, class, lang, dir, title y style. No existe un atributo moderno que lo vuelva válido. text-align, margin-inline y place-items son propiedades CSS; class es un atributo HTML que permite seleccionar el elemento. El atributo global style puede contener CSS, pero no elimina la obsolescencia de <center>.
Evita usar espacios o sucesivos saltos de línea para posicionar contenido: el resultado depende de la fuente y del ancho de pantalla. Tampoco esperes que margin-inline: auto centre cualquier elemento en cualquier modelo de distribución; el caso de la tarjeta es una caja de bloque en el flujo normal.
Mantén los encabezados y párrafos que expresan la estructura. Una posición centrada no comunica por sí sola que un texto sea un título o un aviso. Para textos largos, una alineación inicial y un ancho limitado suelen facilitar seguir las líneas. En grid o flex, conserva un orden de lectura coherente en el HTML y evita reordenarlo solo para conseguir una composición visual.
Preguntas frecuentes
¿Por qué no usar center si todavía funciona?
Porque es una función obsoleta que incorpora una decisión de presentación al marcado. Los navegadores conservan comportamientos antiguos por compatibilidad; eso no convierte su uso en HTML actual conforme. CSS permite elegir la alineación sin cambiar el significado del contenido.
¿Text-align centra un div completo?
Centra su contenido en línea, no la caja del <div>. Para una tarjeta como la del ejemplo, limita el ancho y aplica márgenes automáticos. Para colocar un hijo dentro de un área, utiliza una distribución con grid o flex y la alineación apropiada.
¿Qué etiquetas uso al reemplazar center?
Usa <p> si el contenido es un párrafo. Conserva la etiqueta semántica que corresponda si ya existe. Añade <div> solo cuando necesitas un contenedor genérico para agrupar elementos. <style> contiene las reglas CSS del documento, como en el ejemplo; no es un contenedor para el contenido que quieres centrar.
Compatibilidad y fuentes
Referencia revisada el 3 de octubre de 2026. Los datos de compatibilidad de MDN para <center> registran soporte histórico en Chrome, Firefox, Safari y Edge, y lo marcan como obsoleto. Ese soporte sirve para interpretar páginas antiguas; el criterio de autoría sigue siendo la prohibición del Living Standard.
La referencia de MDN sobre <center> complementa la distinción entre alinear el contenido y centrar bloques. Las fuentes normativas de HTML y CSS están enlazadas junto a las explicaciones correspondientes. Los ejemplos actuales se pueden probar sin ejecutar la etiqueta histórica.