Como centralizar uma div no HTML

Motivaç�o

Centralizar um elemento dentro de um container, seja verticalmente, horizontalmente, ou em ambas as direç�es, � uma necessidade bastante comum quando estamos desenvolvendo p�ginas para a web. Em telas de login, por exemplo, normalmente optamos por manter os elementos principais no centro da tela, e esse comportamento deve se manter em qualquer resoluç�o, como vemos na Figura 1.

Figura 1. Tela de login centralizada

Antes das CSS3, por�m, obter esse tipo de formataç�o visual n�o era uma tarefa t�o simples, principalmente devido � incompatibilidade entre os browsers e � necessidade de garantir a responsividade. Com a vers�o mais recente das folhas de estilo, no entanto, a disposiç�o de elementos em um container foi simplificada pelo recurso de Flexbox, que permite distribuir adequadamente o espaço interno de um container, mesmo que suas dimens�es sejam vari�veis.

Neste artigo veremos como centralizar uma div tanto verticalmente quanto horizontalmente com o Flexbox, empregando para isso um c�digo que pode ser aplicado em diferentes situaç�es.

Centralizando uma div

Aqui, trabalharemos basicamente sobre o elemento que atuar� como container, de forma que as divs ou outros componentes internos sejam alinhados ao centro. Para isso, iniciaremos criando um arquivo HTML com a estrutura apresentada na Listagem 1.

Listagem 1. P�gina HTML com div a ser centralizada


        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <title>Document</title>
        </head>
        <body>
        <div class="container">
        <div class="box">
        </div>
        </div>
        </body>
        </html>

Nessa p�gina, a div com classe container� o elemento principal do nosso layout, pois conter� as formataç�es via CSS para centralizar o seu conte�do (nesse caso, a div com classe box, que representar� o formul�rio de login visto anteriormente). Esse resultado pode ser obtido ao inserirmos, abaixo da linha 5 da Listagem 1, a tag <style>, com o c�digo CSS apresentado na Listagem 2.

Listagem 2. C�digo CSS para centralizar a div


        <style>
        .container {
        width: 100vw;
        height: 100vh;
        background: #6C7A89;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        }
        .box {
        width: 300px;
        height: 300px;
        background: #fff;
        }
        body {
        margin: 0px;
        }
        </style>

Run

Linhas 3 e 4: definimos as dimens�es do container como 100% da largura (width) e altura (height) da p�gina. Para isso, utilizamos as unidades vw e vh das CSS3, que representam, respectivamente, a largura e a altura da viewport;
Linha 5: alteramos a cor do plano de fundo da div container, para melhor simular o resultado visto na Figura 1;
Linha 6: definimos a propriedade display do container como flex. Essa � a configuraç�o que faz com que, de fato, a div utilize o recurso de layout flex�vel (Flexbox);
Linha 7: com a propriedade flex-direction, fazemos com que os itens internos sejam dispostos horizontalmente, ou seja, em forma de linha (row);
Linha 8: configuramos a disposiç�o dos elementos internos como centralizados na direç�o definida na propriedade anterior, ou seja, os itens ficar�o no centro da linha (horizontalmente);
Linha 9: com a propriedade align-items definida como center, fazemos com que os elementos internos sejam tamb�m alinhados na vertical;
Linhas 11 a 15: configuramos a div box com o plano de fundo branco e dimens�es fixas.
Linhas 16 a 18: removemos as margens do corpo do documento, fazendo assim com que a div container ocupe toda a p�gina.

Ao acessarmos esse documento no browser, veremos a div posicionada no centro, como mostra a Figura 2, e mesmo redimensionando o browser, notaremos que ela mant�m esse comportamento.

Figura 2. Div centralizada com Flexbox

O mesmo resultado visual poderia ser obtido se defin�ssemos a propriedade flex-direction como column. Nesse caso, seria preciso configurar a disposiç�o dos elementos internos para ocorrer na direç�o vertical, enquanto a propriedade align-items passaria a atuar na direç�o horizontal.

Clique aqui e veja mais exemplos criados pela comunidade DevMedia :)

Como centralizar divs em HTML e CSS

Veja neste artigo como centralizar elementos HTML em um container utilizando o recurso de flexbox das CSS3.

Motivaç�o

Centralizando uma div

Artigos relacionados