Centralizando um elemento com CSS

Alura
gabriel-ferreira
gabriel-ferreira

Compartilhe

Se você desenvolve pra web é mais do que comum querermos centralizar elementos na tela, certo? Vamos imaginar que temos a seguinte div:

 <div class="container"> 
    <p>Aqui temos um texto</p> 
<div> 

Se você quiser centralizar o texto dentro da div, pode fazer:

.container { text-align: center; }

Banner da Imersão Agentes de IA da Alura com Google Gemini. Participe de 3 aulas gratuitas online, com certificado, para você aprender a criar agentes de IA que pensam por você! Inscreva-se agora e garanta a sua vaga e participe de uma comunidade exclusiva no discord!

Você pode ver esse código funcionando aqui aqui.

Esse código funciona para centralizar qualquer elemento que seja inline (você pode ver quais são inline) ou inline-block.

Ah, mas e se eu não quiser centralizar o conteúdo, mas sim a div na tela? Desse jeito que fizemos, não vai funcionar. Nesse caso, temos que fazer basicamente duas coisas:

dar um tamanho para a div e setar as margens esquerda e direita para auto:

.container { 
    width: 700px; 
    margin-left: auto;
    margin-right: auto; 
}

Você pode ver um demo desse código aqui.

Esse código funciona para qualquer elemento block.

E aí, gostou? Quer aprender mais? Dá uma olhada na nossa Formação Front-End!

Veja outros artigos sobre Front-end