El centrado perfecto

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 48 de 76.

En CSS, lograr el "centro perfecto" —centrar un elemento tanto horizontal como verticalmente dentro de su padre— es un desafío de diseño común. Flexbox proporciona una solución elegante y directa a este problema. Al combinar las propiedades justify-content y align-items, puedes centrar fácilmente un elemento hijo dentro de su contenedor flex, independientemente del tamaño del hijo o del padre.

Aquí tienes cómo lograr el centrado perfecto usando Flexbox:

.container {
    display: flex; /* Convierte al padre en un contenedor flex */
    justify-content: center; /* Centra al hijo horizontalmente a lo largo del eje principal */
    align-items: center; /* Centra al hijo verticalmente a lo largo del eje transversal */
}

Para que esta técnica funcione de manera efectiva, asegúrese de que el contenedor flex tenga una altura definida. Si la altura del contenedor no se establece explícitamente, solo será tan alto como su contenido, y el centrado vertical puede no ser evidente.

Aquí tienes un ejemplo de cómo usar esta técnica en HTML:

<div class="container">
    <div class="child">This is centered</div>
</div>

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px; /* Establece una altura específica para el contenedor */
    border: 1px solid black; /* Opcional: Añade un borde para visualización */
}

.child {
    padding: 20px;
    border: 1px solid red;
}

En este ejemplo, el elemento .container tiene una altura de 300px, y el elemento .child estará perfectamente centrado tanto horizontal como verticalmente dentro de él.

Desafío

Fácil

Se te proporciona un documento HTML con una división padre (<div>) que contiene una división hija (<div>). Tu tarea es usar Flexbox para centrar perfectamente la división hija dentro de la división padre. Sigue los pasos a continuación:

Escribe una regla CSS que apunte al elemento <div> con la clase parent.
Establece la propiedad display del elemento .parent a flex para convertirlo en un contenedor flex.
Establece la propiedad justify-content del elemento .parent a center para centrar al hijo horizontalmente.
Establece la propiedad align-items del elemento .parent a center para centrar al hijo verticalmente.
Dale al elemento .parent una height de 200px para asegurar que el centrado vertical sea visible.

Hoja de referencia

Para centrar perfectamente un elemento tanto horizontal como verticalmente usando Flexbox, combine justify-content: center y align-items: center:

.container {
    display: flex;
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    height: 300px; /* Definir la altura para que el centrado vertical sea visible */
}

El contenedor flex debe tener una altura definida para que el centrado vertical sea evidente.

Pruébalo tú mismo

<html>
<head>
    <title>The Perfect Center</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">Center Me</div>
    </div>
</body>
</html>