layout-2

 

justify-content: center y align-items: center en CSS

Estas dos propiedades son fundamentales en Flexbox y se usan para centrar elementos, pero actúan en ejes diferentes. Aquí te explico su propósito y sus diferencias:

---

justify-content: center

¿Qué hace?

• Alinea los elementos a lo largo del eje principal (main axis)

• Centra los elementos horizontalmente por defecto (si flex-direction: row)

Ejemplo visual:

css

.contenedor {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
}

text

[     [Elemento]      ]
←─── eje principal ───→

---

align-items: center

¿Qué hace?

• Alinea los elementos a lo largo del eje transversal (cross axis)

• Centra los elementos verticalmente por defecto (si flex-direction: row)

Ejemplo visual:

css

.contenedor {
    display: flex;
    align-items: center; /* Centra verticalmente */
    height: 200px;
}

text

  ↑
  │   [Elemento]
eje     │
transversal
  ↓

---

PRINCIPAL DIFERENCIA

Propiedad	Eje que controla	Dirección por defecto
justify-content	Eje principal (main axis)	Horizontal (fila)
align-items	Eje transversal (cross axis)	Vertical (fila)

Documentación línea por línea:

css

.card-body {
    display: flex;

Qué hace: Activa Flexbox en este contenedor. Convierte .card-body en un contenedor flexible (flex container) y todos sus hijos directos (h2, p, small, button) se convierten en elementos flexibles (flex items).

---

css

    flex-direction: column;

Qué hace: Establece la dirección del eje principal.

• Por defecto en Flexbox es row (horizontal)

• Con column cambia el eje principal a vertical (de arriba a abajo)

• Esto permite que justify-content ahora controle la alineación vertical

---

css

    justify-content: center;

Qué hace: Distribuye los elementos en el eje principal (que ahora es vertical por el flex-direction: column).

• center = centra todos los elementos verticalmente en el contenedor

• El primer elemento hijo se coloca justo en el medio del espacio disponible

Otros valores posibles: flex-start (arriba), flex-end (abajo), space-between (espacio entre), space-around (espacio alrededor)

---

css

    align-items: center;

Qué hace: Distribuye los elementos en el eje secundario (cruzado).

• El eje secundario ahora es horizontal (porque el principal es vertical)

• center = centra todos los elementos horizontalmente

• Cada elemento se centra dentro del ancho del contenedor

---

css

    text-align: center;

Qué hace: Centra el texto dentro de cada elemento.

• Aunque align-items: center centra los contenedores de los elementos, el texto dentro podría seguir alineado a la izquierda

• Esta línea asegura que el texto también esté centrado

• Es un "refuerzo" para el centrado horizontal del contenido textual

---

css

    min-height: 250px;

Qué hace: Establece una altura mínima para el contenedor.

• Necesaria para que justify-content: center tenga efecto visible

• Si el contenido es más alto, el contenedor se expande

• Si el contenido es más bajo, el contenedor mantiene 250px y el contenido se centra dentro

---

css

    padding: 20px;

Qué hace: Añade espacio interno alrededor de todo el contenido.

• Separa el contenido de los bordes del contenedor

• Evita que el texto toque los bordes cuando está centrado

Explicación final:

Este código crea un centrado perfecto del contenido dentro de la tarjeta:

1. Activamos Flexbox con display: flex

2. Cambiamos a dirección vertical con flex-direction: column para poder centrar verticalmente

3. Centramos verticalmente con justify-content: center (todos los elementos juntos en el medio)

4. Centramos horizontalmente con align-items: center (cada elemento individualmente)

5. Aseguramos texto centrado con text-align: center

6. Damos espacio para centrar con min-height: 250px (altura suficiente para ver el centrado)

7. Añadimos respiro con padding: 20px (separación de los bordes)

Resultado: Todos los elementos (título, párrafo, texto pequeño y botón) aparecen perfectamente centrados tanto horizontal como verticalmente dentro de la tarjeta, con un espacio agradable alrededor.

Te ayudo a justificar el contenido usando Flexbox de la manera más sencilla. El "justificar contenido" en Flexbox se refiere a la propiedad justify-content que distribuye los elementos a lo largo del eje principal.

Para tu código, hay varias formas de usar Flexbox. Te mostraré las más útiles y sencillas:

Opción 1: Centrar todo vertical y horizontalmente

css

.card-body {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente */
    align-items: center; /* Centra horizontalmente */
    text-align: center; /* Para que el texto también se centre */
    min-height: 300px; /* Necesario para ver el efecto vertical */
}

Opción 2: Distribuir con espacio entre elementos

css

.card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Espacio automático entre elementos */
    align-items: flex-start; /* Alinea a la izquierda */
    min-height: 300px;
}

/* Opcional: si quieres que el botón se alinee a la derecha */
.card-body button {
    align-self: flex-end; /* Solo el botón se va a la derecha */
}

Opción 3: Espacio alrededor con el primer elemento arriba

css

.card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-around; /* Espacio alrededor de cada elemento */
    min-height: 300px;
}

Código completo aplicado a tu HTML:

css

.card-body {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Cambia esto según lo que necesites */
    align-items: center;
    text-align: center;
    min-height: 250px;
    padding: 20px;
}

.card-body p {
    color: #6c757d;
    line-height: 1.5;
    margin: 0; /* Quitamos el margin-bottom que tenías */
}

.card-body h2 {
    font-size: 24px;
    color: #212529;
    margin: 0 0 10px 0; /* Ajustamos el margen */
}

.card-body small {
    margin: 10px 0;
}

.card-body button {
    margin-top: 15px;
}

Los valores más útiles de justify-content:

• flex-start (default): Elementos al principio

• flex-end: Elementos al final

• center: Elementos centrados

• space-between: Espacio igual entre elementos (primero al inicio, último al final)

• space-around: Espacio igual alrededor de cada elemento

• space-evenly: Espacio completamente igual entre todos

¿Qué tipo de justificación necesitas específicamente? Así puedo ayudarte con el valor exacto que buscas.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<style>

    *{

        margin: 0;

        padding: 0;

    }

    body{

        background-color: #f0f0f0;

    }

    .container{

        display: flex;

        justify-content:center; /*Centra horizontal mente*/

        /* align-items:center;Centra verticalmente*/

        padding-top: 50px;  /* Ajusta este valor para bajar la card */

       /* min-height: 100vh;  Alyura minima = 100% del viewport*/

    }

    .card{

        display: flex;

        flex-direction:column; /*Apila hijos verticalmente*/

        width: 500px;    /*Ancho fijo 500*/

        border-radius: 8px;   /*bordes redondeados*/

        background-color: white; /*Fondo blanco*/

        box-shadow: 0 2px 5px rgba(0,0,0,0,0.1);/*agregar sombras a los elementos */

    }

    .card-header{

        height: 50px;/* Altura fija de 50 píxeles */

        background: #f8f9fa;

        border-radius: 8px 8px 0 0; /*Bordes redondeados*/

        padding: 0 20px;/* Relleno: 0 arriba/abajo, 20px izquierda/derecha */

/*Crea espacio interno a los lados (izquierda y derecha) de 20px*/

        display: flex;

        align-items:center;

        border-bottom: 1px solid #dee2e6;/* Línea divisoria gris suave en la parte inferior */

    }

   

    .card-body{

        padding: 30px 20px;

/*Separa el contenido del header y del borde inferior*/

/*Separa el contenido de los bordes laterales Crea un "colchón" de espacio alrededor de todo el contenido*/

        background: white;

    }

    .card-body p{

        margin-bottom: 20px;/* Espacio inferior entre párrafos */

        color: #6c757d;

        line-height: 1.5;/* Altura de línea: 1.5 veces el tamaño de fuente (mejora la legibilidad) */

    }

    .card-body h2{

        margin-bottom: 15px; /* Espacio inferior después del título */

        font-size: 24px;

        color: #212529;

    }

</style>

<body>

    <div class="container">

        <div class="card">

            <div class="card-header">

                Featured

            </div>

            <div class="card-body">

                <h2>Special title treatment</h2>

                <p>With supporting text below as</p>

                <small>Last updated 3 mins ago</small>

                <button>Go somewhere</button>

            </div>

        </div>

    </div>

</body>

</html>