¿Cómo puedo centrar un elemento perfectamente (vertical y horizontal) usando Flexbox?

Centrar un elemento perfectamente, tanto en el eje horizontal como en el vertical, dentro de un contenedor padre es una de las tareas que Flexbox simplifica enormemente. Solo necesitas aplicar tres propiedades CSS al contenedor padre:

1. display: flex;: Esta propiedad convierte el elemento padre en un contenedor Flexbox, permitiendo que sus hijos (los ítems flexibles) sean gestionados por el sistema Flexbox.
2. justify-content: center;: Cuando la dirección principal es la fila (por defecto, flex-direction: row), esta propiedad centra los ítems flexibles horizontalmente dentro del contenedor.
3. align-items: center;: De nuevo, asumiendo la dirección principal como fila, esta propiedad centra los ítems flexibles verticalmente dentro del contenedor.

Si quieres que el elemento se centre en toda la altura de la ventana del navegador, el contenedor padre (o uno de sus ancestros) debería tener una altura definida, como min-height: 100vh; (100% de la altura del viewport).

Aquí tienes un ejemplo práctico:

HTML:

<div class="contenedor-flex">
  <div class="elemento-centrado">
    Este contenido está perfectamente centrado.
  </div>
</div>
Lenguaje del código: PHP (php)

CSS:

.contenedor-flex {
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center;    /* Centra verticalmente */
  min-height: 300px;      /* Altura del contenedor, ej: 300px o 100vh para pantalla completa */
  background-color: #f0f0f0; /* Solo para visualización */
  border: 1px solid #ccc;    /* Solo para visualización */
}

.elemento-centrado {
  background-color: lightcoral;
  padding: 20px;
  text-align: center;
}
Lenguaje del código: PHP (php)

Con este CSS, el div con la clase elemento-centrado se mostrará perfectamente centrado dentro de contenedor-flex. Si la propiedad flex-direction del contenedor se estableciera a column, entonces justify-content: center; se encargaría del centrado vertical y align-items: center; del horizontal.