Centralizando um elemento com CSS

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!

Leia também:

• CSS: Grids e tabelas com responsividade na Web
• Nomes de classes no CSS
• O que é Clean Code?
• Como se tornar um desenvolvedor full-stack no próximo ano
• O que é front-end e back-end?