Cómo centrar un texto en HTML paso a paso: Tutorial fácil

¿Cansado de que el contenido de tus páginas web se vea desordenado? ¿Aún no logras darle el aspecto que quieres? Eso es porque no has aprendido a centrar un texto en HTML. Pero ya no tendrás que preocuparte más al respecto. He creado este tutorial fácil para que, paso a paso, logres estructurar tu contenido para que se vea mucho más profesional y llame la atención de los visitantes. Por supuesto, usaremos los métodos modernos (HTML5 y CSS), con el fin de que tu aprendizaje esté actualizado todo el tiempo.

Centrar un texto en HTML: Así se hacía antes de HTML 5

Por si no lo sabías, en las primeras versiones de HTML, existía una etiqueta que facilitaba enormemente este proceso. Se llamaba <center> y se usaba así:

<center>
  <h1>Bienvenido a KeepCoding</h1>
</center>

Lo grandioso de ella era que podías centrar el contenido muy fácilmente. Pero, ¿por qué desapareció si era tan fácil de usar? Resulta que con la llegada de HTML4 dejó de ser recomendada por los estándares modernos.

Actualmente hay algunos navegadores que la soportan, pero si la usas podrías tener problemas de compatibilidad más adelante. Como quien dice, está ahí pero no está. La moda actual es usar HTML5 y CSS para manejar los estilos y esto incluye el centrado de un texto, que es lo que te explicaré ahora.

¿Cómo centrar un texto en HTML con CSS?

Usaremos text-align para centrar un texto en HTML. ¡Ojo! por nada del mundo se te puede olvidar esta propiedad de CSS. Te explicaré cómo usarla para alinear tu texto horizontalmente dentro de un elemento.

Con estos ejemplos lo entenderás mejor:

Aprende a centrar un texto en un elemento específico

Para este ejemplo vamos a imaginar que tienes este contenido en tu página web:

<div>
  <h1>Aprende HTML con KeepCoding</h1>
  <p>Domina el desarrollo web y cambia tu vida profesional.</p>
</div>

Para centrar este texto, tienes que aplicar CSS al contenedor:

div {
  text-align: center;
}

Como resultado observarás que todo el texto dentro del <div> estará centrado horizontalmente.

Aprende a centrar un texto en toda la página

Ahora, si lo que tu quieres es que todo el contenido de tu página esté centrado, hay una forma muy fácil de lograrlo:

Solo aplica la propiedad text-align al cuerpo (body) del documento:

body {
  text-align: center;
}

Te darás cuenta de que cualquier elemento de texto que no tenga estilos específicos adoptará esta alineación centrada.

¿Qué más puedes hacer con la propiedad text-align?

Tienes muchas otras opciones más. De hecho, con text-align puedes hacer lo siguiente:

• text-align: left;: Recuerda que left es izquierda, entonces cuando la usas así lo que hace es alinearte el texto al borde izquierdo (valor predeterminado en idiomas como español e inglés).
• text-align: right;: Como right es derecha, pues verás tu texto alineado al borde derecho.
• text-align: justify;: Este es como el justificado en Word, tu texto quedará distribuido de manera uniforme entre ambos bordes.

Por ejemplo, si quisieras justificar un texto, el código sería:

p {
  text-align: justify;
}

De hecho es bastante útil si quieres darle un aspecto más uniforme a esos párrafos largos y si tienes información importante para resaltar, también puedes subrayar en HTML.

Cómo centrar un texto en HTML verticalmente

No te lo voy a negar, centrar un texto en HTML verticalmente sí es un poco más complejo, pero con CSS es posible. La forma tradicional, por así decirlo, es con Flexbox. Esta herramienta te permite diseñar layouts flexibles.

Ejemplo práctico con Flexbox

En el caso hipotético de que tuvieses este contenido…

<div class="container">
  <h1>Bienvenido al futuro del desarrollo web con KeepCoding</h1>
</div>

…y quisieras centrarlo tanto horizontal como verticalmente, podrías usar Flexbox en el contenedor:

.container {
  display: flex;
  justify-content: center; /* Centrado horizontal */
  align-items: center; /* Centrado vertical */
  height: 100vh; /* Ocupa toda la altura de la ventana */
}

Te servirá bastante si necesitas centrar contenido dentro de secciones completas de una página. Además, podrías añadirle cursiva en HTML para hacerlo más llamativo o insertar un espacio en blanco para evitar textos tan largos.

Ejemplo completo: Centrar un texto en HTML en una página web

En este espacio quiero que combines lo que aprendiste sobre crear un diseño centrado y profesional. (Te dejo el código para que experimentes con él):

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Centrar texto en HTML</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      text-align: center;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <h1>¡Domina HTML con KeepCoding!</h1>
  <p>Transforma tu carrera en tecnología con nosotros.</p>
</body>
</html>

Si observas bien, verás que este código que te di de ejemplo crea una página con un texto perfectamente centrado.

En KeepCoding tenemos un Bootcamp llamado Programación desde Cero, donde aprenderás desde fundamentos como centrar un texto en HTML hasta tecnologías avanzadas que te abrirán las puertas al sector IT. Nuestro enfoque es totalmente práctico.