Umas questão que assombra tanto um novato no CSS quanto eu semana passada.
Como você deve saber: no desenvolvimento web, o CSS (Cascading Style Sheets) é super importante para controlar a aparência visual da página.
E nada mais visualmente agradável do que um conteúdo bem centralizado e simétrico.
A propriedade “display” no CSS define o tipo do elemento e como ele e os elementos filho vão se comportar.
Neste artigo, vamos explorar os diferentes tipos de display e como centralizar uma DIV em cada um deles. (a 3º é a melhor forma).
1. Display: block;
O valor “block” faz com que um elemento ocupe toda a largura disponível na página, criando uma “caixa” que inicia em uma nova linha.
Para centralizar uma DIV usando o display block, podemos utilizar essa técnica:
– Definir as margens esquerda e direita como “auto” e especificar uma largura fixa para a DIV (pra ela não ocupar 100% da largura). Por exemplo:
```
.div-pai {
display: block;
height: 150px;
}
.div-centralizada {
width:30px;
height:30px;
margin-left: auto;
margin-right: auto;
}
```Como você deve ter percebido, essa técnica só serve para centralizar um elemento horizontalmente (e não, não adianta tentar usar o valor ‘auto’ no margin-top e margin-bottom).
Existem algumas formas de centralizar uma div verticalmente com o ‘display: block;’, por exemplo:
- Calcular a altura do elemento filho para colocar um ‘padding-top’ no elemento pai.
exemplo: Se o elemento pai tem 50px e o elemento filho tem 20px, basta colocar o padding-top do elemento pai em 15px (já que sobraram 30px).
```
.div-pai {
display: block;
height: 50px;
padding-top: 15px;
}
.div-centralizada {
width: 300px;
height: 20px;
margin-left: auto;
margin-right: auto;
}
```- Usar o ‘position: absolute;’ no elemento filho e definir as propriedades top, bottom, left e right como 0.
usar o ‘position: absolute’ não é recomendado, principalmente por erros de responsividade
```
.div-pai {
display: block;
height: 50px;
position: relative;
}
.div-centralizada {
width: 300px;
height: 20px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
```2. Display: inline-block;
O display com valor ‘inline-block’ faz com que um elemento tenha algumas características de um texto, ainda sendo um bloco. Ele pode ter uma altura e largura específicas, mas ainda assim se comporta como um elemento inline.
Para centralizar uma DIV usando o ‘display: inline-block;’, podemos:
– Definir o ‘text-align’ como ‘center’ no elemento pai. Para alinhar verticalmente, basta adicionar um ‘line-height’ igual ao ‘height’ no elemento pai e um ‘vertical-align: middle’ no elemento filho. Por exemplo:
```
.div-pai {
text-align: center;
height: 150px;
line-height: 150px;
}
.div-centralizada {
display: inline-block;
vertical-align: middle;
width:30px;
height:30px;
}
```Funciona, mas é meio que uma gambiarra
3. Display: flex;
finalmente, o queridinho da atualizade.
O valor “flex” permite um controle flexível do layout (dãa kkk). A centralização e o posicionamento dos elementos com esse display é muito mais simples e … flexível.
Para centralizar uma DIV usando o display flex, podemos utilizar:
– Definir o elemento pai como ‘flex’ e usar as propriedades “justify-content” e “align-items” para centralizar a DIV. Exemplo:
```
.div-pai {
display: flex;
justify-content: center;
align-items: center;
}
.div-centralizada {
/* Propriedades da DIV e tals */
}
```Conclusão
Usar display: flex no CSS é a melhor opção para centralizar elementos com CSS, tanto verticalmente como horizontalmente sem precisar de muitos cálculos ou gambiarras.
Além disso, o display: flex já é compatível com a maioria dos navegadores modernos e grande parte dos sites e construtores de página já usam ele, ou seja, uma escolha segura para seus projetos.
