Como Centralizar Divs em HTML e CSS

Como centralizar divs em HTML e CSS
Veja neste artigo como centralizar elementos HTML em um container utilizando o

recurso de flexbox das CSS3.
(0) (0)
#ShowMeTheCode
Motivao
Centralizar um elemento dentro de um container, seja verticalmente, horizontalmente, ou em ambas as direes, uma necessidade bastante
comum quando estamos desenvolvendo pginas 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 resoluo, como vemos na Figura 1.
Figura 1. Tela de login centralizada
Antes das CSS3, porm, obter esse tipo de formatao visual no era uma tarefa to simples, principalmente devido incompatibilidade entre
os browsers e necessidade de garantir a responsividade. Com a verso mais recente das folhas de estilo, no entanto, a disposio de
elementos em um container foi simplificada pelo recurso de Flexbox, que permite distribuir adequadamente o espao interno de um
container, mesmo que suas dimenses sejam variveis.
Neste artigo veremos como centralizar uma div tanto verticalmente quanto horizontalmente com o Flexbox, empregando para isso um cdigo
que pode ser aplicado em diferentes situaes.
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. Pgina HTML com div a ser centralizada
Nessa pgina, a div com classe container o elemento principal do nosso layout, pois conter as formataes via CSS para centralizar o
seu contedo (nesse caso, a div com classe box, que representar o formulrio de login visto anteriormente). Esse resultado pode ser obtido
ao inserirmos, abaixo da linha 5 da Listagem 1, a tag <style>, com o cdigo 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. Cdigo CSS para centralizar a div
Run
Linhas 3 e 4: definimos as dimenses do container como 100% da largura (width) e altura (height) da pgina. Para isso, utiliz amos 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 configurao que faz com que, de fato, a div utilize o recurso de layout flexvel (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 disposio dos elementos internos como centralizados na direo definida na propriedade anterior, ou seja, os itens ficaro no centro da linha
(horizontalmente);
Linha 9: com a propriedade align-items definida como center, fazemos com que os elementos internos sejam tambm alinhados na vertical;
Linhas 11 a 15: configuramos a div box com o plano de fundo branco e dimenses fixas.
Linhas 16 a 18: removemos as margens do corpo do documento, fazendo assim com que a div container ocupe toda a pgina.
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 mantm esse comportamento.
Figura 2. Div centralizada com Flexbox
O mesmo resultado visual poderia ser obtido se definssemos a propriedade flex-direction como column. Nesse caso, seria preciso configurar
a disposio dos elementos internos para ocorrer na direo vertical, enquanto a propriedade align-items passaria a atuar na direo
horizontal.
Publicado no Canal Front-end web
Guia CSS3 +
por Joel Rodrigues
Front-end expert

Como Centralizar Divs em HTML e CSS

Enviado por

Direitos autorais:

Formatos disponíveis

Como Centralizar Divs em HTML e CSS

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Como Centralizar Divs em HTML e CSS

Enviado por

Direitos autorais:

Formatos disponíveis

Como centralizar divs em HTML e CSS

Veja neste artigo como centralizar elementos HTML em um container utilizando o

Figura 1. Tela de login centralizada

Centralizando uma div

Listagem 2. Cdigo CSS para centralizar a div

Figura 2. Div centralizada com Flexbox

por Joel Rodrigues

Você também pode gostar