Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login

Como centralizar divs em HTML e CSS

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

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (28)  (0)

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.

Tela de login centralizada
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.

01 <!DOCTYPE html>
02 <html lang="en">
03 <head>
04     <meta charset="UTF-8">
05     <title>Document</title>
06 </head>
07 <body>
08     <div class="container">
09         <div class="box">
10         </div>
11     </div>
12 </body>
13 </html>
Listagem 1. Página HTML com div a ser centralizada

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.

01 <style>
02     .container {
03         width: 100vw;
04         height: 100vh;
05         background: #6C7A89;
06         display: flex;
07         flex-direction: row;
08         justify-content: center;
09         align-items: center
10     }
11     .box {
12         width: 300px;
13         height: 300px;
14         background: #fff;
15     }
16     body {
17        margin: 0px;
18 }
16 </style>
Listagem 2. Código CSS para centralizar a div

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.

Div centralizada com Flexbox
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 :)
Carregando
 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Ajude-nos a evoluir: você gostou do post?  (28)  (0)
Confirmar voto
Compartilhe:
Ficou com alguma dúvida?