Cómo centrar un texto en HTML de forma sencilla y efectiva

¿Te has encontrado alguna vez con un texto que simplemente se niega a colocarse en el centro de tu página? Pues tranquilo, no estás solo. A todos nos ha pasado, incluso a quienes llevamos años en el diseño web. Hoy vamos a explicarte cómo centrar un texto en HTML, con ejemplos prácticos, buenas prácticas y algunas sorpresas que probablemente no conocías. Te aseguramos que, al final de este artículo, no habrá texto que se te resista.

Métodos para alinear texto en HTML

Uso de la etiqueta <center> y por qué evitarla

Empecemos por el clásico. La etiqueta <center> fue durante mucho tiempo la forma más directa de centrar contenido. Era sencilla:

<center>Este texto está centrado</center>

¿El problema? Que está obsoleta. Ya no se recomienda usarla porque no cumple con los estándares modernos de HTML5. Puede seguir funcionando, sí, pero es como intentar ver Netflix en una tele de tubo. No es lo ideal.

Aplicando estilos CSS: text-align y otras propiedades útiles

La forma recomendada de hacerlo es con CSS. Y aquí entra en juego text-align: center;, que es la propiedad reina para este tema.

<div style="text-align: center;">
  <p>Este texto está centrado con CSS.</p>
</div>

También puedes aplicarlo desde una hoja de estilos externa o interna:

.centrado {
  text-align: center;
}

<div class="centrado">
  <h2>Texto centrado</h2>
</div>

Centrar texto en distintos contextos

Dentro de un párrafo o <div>

Dentro de cualquier bloque (<div>, <section>, <article>, etc.), simplemente con text-align: center ya lo tienes solucionado. Eso sí, asegúrate de que el contenedor ocupe todo el ancho disponible o el centrado no será visible.

En elementos de encabezado como <h1>, <h2>, etc.

Exactamente igual. Solo necesitas aplicar el estilo al encabezado:

<h1 style="text-align: center;">Encabezado centrado</h1>

O mejor, desde una clase CSS:

.titulo-centrado {
  text-align: center;
}

<h2 class="titulo-centrado">Centrado con clase</h2>

Combinando HTML y CSS para estructuras más complejas

Cuando tienes una estructura en columnas o elementos en flexbox o grid, necesitas ajustar también el contenedor:

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center; /* centrado vertical */
  height: 200px;
}

<div class="flex-container">
  <p>Texto perfectamente centrado</p>
</div>

Ejemplos prácticos de código para alinear texto

HTML básico con estilos en línea

<p style="text-align: center;">Este texto está centrado en línea.</p>

Uso de hojas de estilo externas o internas

Esto es lo recomendado en proyectos reales, para mantener el código limpio:

.centrado {
  text-align: center;
}

<section class="centrado">
  <p>Centrado con estilo limpio y mantenible.</p>
</section>

Centrado vertical y horizontal al mismo tiempo

Aquí es donde mucha gente se lía. La solución más moderna es con Flexbox:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

<div class="container">
  <p>¡Centrado total!</p>
</div>

Buenas prácticas y errores comunes al alinear texto

Evita métodos obsoletos

Ya lo dijimos, pero insistimos: nunca uses <center>. Puede pasar validaciones, pero está desfasado y te limita en responsive, SEO y mantenimiento.

Asegura la compatibilidad con distintos navegadores

Aunque hoy en día text-align: center funciona bien en todos los navegadores modernos, conviene probar el resultado con herramientas como:

• Can I Use

• W3C Validator

• Extensiones de navegador como "Web Developer" o "CSS Viewer" para inspeccionar y ajustar en vivo.

Conclusión: la mejor forma de centrar texto en HTML hoy en día

Así que ya lo sabes: la mejor manera de centrar texto en HTML es usando CSS, y más concretamente text-align: center para horizontal y Flexbox para centrado total. Evita métodos antiguos, mantén tu código limpio y asegúrate de probar en todos los dispositivos.

¿Quieres llevar tus proyectos un paso más allá? Entonces quizás sea hora de contar con un equipo profesional. En Overant, somos expertos en diseño web a medida y podemos ayudarte a crear páginas modernas, funcionales y con una base técnica impecable. Si estás en Alicante o alrededores, no dudes en consultarnos. Haz clic aquí para saber más sobre nuestro diseño web en Alicante.

¿Tienes alguna duda o quieres que hagamos una guía parecida para otra propiedad CSS? ¡Déjanos un comentario y lo preparamos!