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 aqui) 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 Trilha HTML e Front-End!


Autodidata, programa há 10 anos e herdou a profissão do pai, também programador. Atuou 7 anos com .NET em diversos ramos: bancos, seguradoras, agências de marketing, telefonia. Atualmente é instrutor e programador na Caelum. Acredita que todo mundo pode programar e não tem preconceito nenhum com linguagens e tecnologias. Está sempre disposto a aprender e ensinar coisas novas.

  • Carlos

    margin: 0 auto

  • Valeu :), Bem explicado !

  • Fred

    Vale lembrar que o “margin: 0 auto;” só funciona em elementos com “display: block”, como a div tem por padrão por exemplo.

    Bom post, bem explicado, parabéns!

  • Curti 😀 já usei bastante assim: http://jsfiddle.net/bxmf21nq/

  • Pedro Ávila

    Muito bom! Só achei que faltou falar sobre como centralizar verticalmente.

Próximo ArtigoPalestra: Offline Web com Service Workers