O Centro Perfeito

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 48 de 76.

No CSS, alcançar o "centro perfeito" — centralizar um elemento tanto horizontal quanto verticalmente dentro de seu pai — é um desafio comum de layout. O Flexbox oferece uma solução elegante e direta para esse problema. Ao combinar as propriedades justify-content e align-items, você pode centralizar facilmente um elemento filho dentro de seu contêiner flex, independentemente do tamanho do filho ou do pai.

Aqui está como alcançar a centralização perfeita usando Flexbox:

.container {
    display: flex; /* Transforma o pai em um container flex */
    justify-content: center; /* Centraliza o filho horizontalmente ao longo do eixo principal */
    align-items: center; /* Centraliza o filho verticalmente ao longo do eixo transversal */
}

Para fazer esta técnica funcionar de forma eficaz, certifique-se de que o contêiner flex tenha uma altura definida. Se a altura do contêiner não for definida explicitamente, ele terá apenas a altura do seu conteúdo e o centralizamento vertical pode não ser aparente.

Aqui está um exemplo de como usar esta técnica em HTML:

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

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px; /* Set a specific height for the container */
    border: 1px solid black; /* Optional: Add a border for visualization */
}

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

Neste exemplo, o elemento .container tem uma altura de 300px, e o elemento .child será perfeitamente centralizado tanto horizontal quanto verticalmente dentro dele.

Desafio

Fácil

Você recebeu um documento HTML com uma divisão pai (<div>) que contém uma divisão filha (<div>). Sua tarefa é usar Flexbox para centralizar perfeitamente a divisão filha dentro da divisão pai. Siga os passos abaixo:

Escreva uma regra CSS que selecione o elemento <div> com a classe parent.
Defina a propriedade display do elemento .parent para flex para transformá-lo em um contêiner flex.
Defina a propriedade justify-content do elemento .parent para center para centralizar o filho horizontalmente.
Defina a propriedade align-items do elemento .parent para center para centralizar o filho verticalmente.
Atribua ao elemento .parent uma height de 200px para garantir que a centralização vertical seja visível.

Folha de consulta

Para centralizar perfeitamente um elemento tanto horizontal quanto verticalmente usando Flexbox, combine justify-content: center e align-items: center:

.container {
    display: flex;
    justify-content: center; /* Centralizar horizontalmente */
    align-items: center; /* Centralizar verticalmente */
    height: 300px; /* Define a altura para que a centralização vertical seja visível */
}

O contêiner flex deve ter uma altura definida para que a centralização vertical seja aparente.

Experimente você mesmo

<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>