Cómo centrar un div vertical y horizontalmente.

Para centrar un «`div«` en el eje vertical, hay varios métodos que se pueden emplear. Aquí se presentan tres formas comunes de lograrlo:

• **Usar Flexbox:** Una de las formas más utilizadas actualmente es a través de Flexbox, una técnica de diseño en CSS que permite alinear elementos de manera eficiente tanto horizontal como verticalmente. Para centrar un «`div«` verticalmente en Flexbox, se puede aplicar la siguiente regla al contenedor padre:

  «`
  .container {
  display: flex;
  justify-content: center; /* centra horizontalmente */
  align-items: center; /* centra verticalmente */
  }
  «`

• **Usar Grid:** Otra opción sería utilizar CSS Grid Layout, una técnica que permite dividir el espacio en filas y columnas. Para centrar un «`div«` verticalmente con Grid, se puede hacer lo siguiente:
  «`
  .container {
  display: grid;
  place-items: center; /* centra horizontal y verticalmente */
  }
  «`
• **Usar transform:** También es posible centrar un «`div«` verticalmente mediante la propiedad «`transform«`, aunque no es tan utilizado como Flexbox o Grid. En este caso, se puede aplicar una combinación de «`transform: translateY()«` junto con «`position: absolute«` al elemento que se desea centrar. Por ejemplo:
  «`
  .container {
  position: relative;
  }
  .content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  }
  «`

Estos son algunos de los métodos más comunes para centrar un «`div«` en el eje vertical en CSS.

Para centrar un texto tanto vertical como horizontalmente en un elemento HTML, es posible utilizar varias técnicas en CSS:

• Utilizar display: flex;: Una forma moderna y efectiva de centrar elementos es mediante el uso de flexbox. Esto se logra aplicando display: flex; al contenedor y luego justify-content: center; align-items: center; para centrar tanto en horizontal como en vertical.
• Tabla HTML: Otra técnica es mediante el uso de tablas. Crear una tabla con una única celda y luego aplicar vertical-align: middle; y text-align: center; al contenido dentro de la celda puede lograr el centrado vertical y horizontal deseado.
• Posicionamiento absoluto: Se puede centrar un elemento utilizando posicionamiento absoluto. Para ello, es necesario establecer las propiedades top: 50%;, left: 50%; y luego aplicar transform: translate(-50%, -50%); para desplazar el elemento al centro tanto vertical como horizontalmente con respecto al padre.

Aplicar estas técnicas adecuadamente permitirá centrar el texto vertical y horizontalmente en un documento HTML de manera efectiva.