Um guia completo de como centralizar elementos no CSS

Muitas vezes quebramos a cabeça na tentativa de centralizar elementos na página. Podemos usar um cronograma para facilitar esta árdua tarefa. Inicialmente precisamos ver em qual sentido queremos centralizar, na horizontal, na vertical ou em ambos sentidos? em seguida observamos qual tipo de elemento que queremos centralizar, se trata-se de um elemento de linha ou um elemento de bloco. Vamos seguir o cronograma para resolver problemas com centralização de elementos.

Neste tópico estão as informações que serão necessárias para centralizar seu texto na página apenas horizontalmente.

É um elemento de linha?

Se a resposta for sim, basta utilizar o text-align: center;. Isso funcionará para inline, inline-block, inline-table, inline-flex, etc.

É um elemento de bloco?

Se estamos trabalhando com um elemento em bloco, basta utilizar margem esquerda e margem direita com valor auto margin: 0 auto;, seu bloco estará alinhado horizontalmente em sua página. Mas vale salientar que para tal deve haver espaço para que o elemento seja centralizado, ou seja, ele deve ser menor que o elemento pai.

Existe mais de um elemento de nível de bloco?

Caso exista mais de um elemento de bloco e eles estejam empilhados um em cima do outro a técnica anterior serve, mas se for o caso de que eles estejam um ao lado do outro a melhor forma é utilizar o flexbox, utilizando as propriedades dedisplay: flex; e justify-content: center; no container.

Neste tópico estão as informações que serão necessárias para centralizar seu texto na página apenas verticalmente.

É um elemento em linha? E é uma única linha?

Às vezes, os elementos podem parecer verticalmente centrados, apenas porque há preenchimento igual acima e abaixo deles. Utiliza-se o padding-top e o padding-bottom de tamanho iguais. Caso o preenchimento não seja uma opção por algum motivo, há um truque onde fazemos com que a altura da linha fique igual à altura do texto. Para isto utiliza-se o height e o line-heigth de tamanhos iguais, e aplique o vertical-align com valor middle.

É um elemento em linha? Mais de uma linha?

O preenchimento igual na parte superior e inferior (padding-top e padding-bottom) pode dar o efeito centrado para várias linhas de texto também, mas se isso não funcionar, talvez o elemento em que o texto esteja dentro pode ser uma célula de tabela, literalmente ou feita para se comportar como uma com CSS. A propriedade vertical-aligné usada, neste caso.

É um elemento de bloco? Você conhece a altura do elemento?

É bastante comum não conhecer a altura no layout da página web, por muitos motivos: se a largura muda, o refluxo do texto pode mudar a altura; diferença no estilo do texto pode alterar a altura; diferença na quantidade de texto pode alterar a altura; elementos com uma relação de aspecto fixa, como imagens, podem mudar de altura quando redimensionados, etc. Mas se você conhece a altura, você pode se centrar verticalmente:

Neste caso devemos utilizar para container o position:relative já para os items o utilizamos o position:absolute;com o top:50%; e transform: translateY(-50%);.

É um elemento de bloco? Você está usando flexbox?

Quando trabalhamos com este tipo display fica ainda mais fácil. Para o display ficar flex basta usar a propriedade display: flex, e para centralizar o elemento de bloco verticalmente basta aplicar flex-direction: column; e justify-content: center; ao container. Veja o código e o resultado abaixo:

Para centralizar os elementos tanto na horizontal quanto na vertical podemos combinar as técnicas anteriormente comentadas para obter elementos perfeitamente centralizados. Mas isso geralmente cai em três campos, são eles:

O elemento possui largura e altura fixas?

Para este caso, usando margens negativas iguais a metade da largura e da altura (somado ao padding). Em seguida utiliza-se uma depois devemos colocá-lo em position: absolute; com top: 50%; e left: 50%;assim ficará centralizá-lo.

Neste caso o heigth:100px somado ao padding da 140px, então utiliza-se uma margin de -70px, e o width:300px somado ao padding:20px dá 340px, utiliza-se uma margin de -170px, ficando assim:margin: -70px 0 0 -170px;.

O elemento é de largura e altura desconhecidas?

Quando não sabemos a largura e altura, que é o mais comum, usamos no container a propriedade transform com um translate de -50% em ambas as direções: transform: translate(-50%, -50%);:

Estou usando o Flexbox?

Para se centrar em ambas as direções com o flexbox, utiliza duas propriedades de centralização: align-items: center; e justify-content: center.

Porém, nem sempre é necessário utiliza-lo, se tivermos um elemento de linha por exemplo, e queremos apenas centraliza-lo horizontalmente, basta atribuir a propriedade text-align: center; para o elemento. Para seu código ficar mais simples, a melhor forma de fazer isto é seguindo o cronograma para utilizar apenas propriedades necessárias.

Related posts:

As we all continue to face the coronavirus pandemic, we’ve had to step outside of our comfort zones and make huge lifestyle shifts — both personally and professionally. Those of us who are lucky to…

As a part of our series about rising music stars, I had the distinct pleasure of interviewing Ranella Farrer. Ranella Farrer has remained a powerhouse in the Filipino-American Entertainment Industry…

An algorithm is one in every of the most drive into the ground word of technical interview to developments. Starting from the apps which were deployed on our smartphones to the triggering element in…