Centralizando um elemento com CSS

Gabs Ferreira

10/11/2015

Compartilhe

Esse artigo faz parte da

Formação Front-end

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; }

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!

Gabs Ferreira

Marketeiro e tech community manager no Grupo Caelum Alura. Podcaster no Hipsters Ponto Tech e Carreira Sem Fronteiras. Creator e blogueiro de tecnologia. .