35

Como eu posso centralizar horizontalmente uma div que está dentro de outra div utilizando apenas CSS?

No caso, podemos assumir que div externa outer tem a largura de 100%.

<div id="outer">  
  <div id="inner">Este é o elemento interno.</div>
</div>
1
  • 2
    Essa pergunta deveria ser protegida. Servirá de referência para muita gente no futuro. Commented 11/02/2014 às 13:58

3 Respostas 3

43

Existem várias maneiras. Estes métodos são dividos em "largura definida" e "largura variável" pois depende da sua necessidade de implementação.

Algumas são semanticamente mais recomendadas, porém ainda não funcionam em quase nenhum navegador, outras já existem há muito tempo e continuam sendo utilizadas pois apresentam compatibilidade superior.


Largura Definida

Existem três métodos populares para fazer isso, são eles:

Margem Automática

#inner {
  margin: 0 auto;
  width: 50%; /* Altere para o valor da largura desejada. */
}

O que nós fizemos aqui foi informar o valor auto para as propriedades de margin-left e margin-right que vai calcular automaticamente a diferença de espaço restante e magicamente centralizar o seu elemento horizontalmente. É importante lembrar que a mesma regra não vale para centralizar um objeto verticalmente.

Internet Explorer 6: Esta versão do Internet Explorer necessita da adição da propriedade text-align: center; neste código.

Internet Explorer 8: Se você tiver problemas de compatibilidade com o Internet Explorer 8, é melhor que adicione a propriedade display: table; neste código.

Posição Absoluta

#outer {
  position: relative;
  width: 100%;
}

#inner {
  left: 50%;
  margin-left: -100px; /* A metade de sua largura. */
  position: absolute;
  width: 200px; /* O valor que você desejar. */
}

Embora utilize margem negativa e posição absoluta, este é o método mais compatível que existe.

Atenção: tome cuidado para que a utilização do position: absolute; não comprometa a integridade do seu layout.

Flexible Box Layout Module

Embora mais recomendado, este método ainda está sendo disseminado e permanece como recurso experimental dos navegadores, por este motivo ainda é muito instável para ser utilizado.

#outer {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

#inner {
  width: 200px; /* Ou a que você quiser. */
}


Largura Variável

Existem duas maneiras de posicionar com larguras variáveis, a mais compatível para este fim é com a utilização do inline-block.

inline-block

#outer {
  text-align: center;
  width: 100%;
}

#inner {
  display: inline-block;
}

O que vai fazer com que o elemento #inner fique centralizado é a presença da propriedade text-align: center; no #outer. Porém é importante ressaltar que o nosso amigo Internet Explorer 7 e inferiores não suportam a propriedade display: inline-block;.

CSS Transforms

Entretanto, se você só preocupado com navegadores que já suportam CSS3, é possível fazer isso de forma mais elegante e simples.

#outer {
  position: relative;
  width: 100%;
}

#inner {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}

Isso também serve para posicionamentos verticais. :)

2
5

Eu costumo usar:

.pai{width: 100%}
.filho{width: 960px; margin: 0 auto;}

O .pai está 100% caso haja alguma imagem que ocupe 100% da tela, o .filho está em 960px para ficar alinhado em monitores com 1024px, assim não irá criar scroll horizontal e ter que usar (overflow-x: hidden).

Se você usar o código que citei acima, terá uma div centralizada. Se por acaso a sua div .pai tiver uma imagem de background, ao dar scroll ela irá diminuir alinhando para a esquerda, lhe aconselho a fazer o seguinte:

.pai img {background-image: url('../images/teste;jpg'); background-repeat: no-repeat; background-position: center top};

Com isso, a sua imagem sempre ficará alinhada no centro e no topo. :D

2

Podemos usar o famoso método pouco ortodoxo :

#outer { width: 100%;}
#inner { width: 1000px; left: 50%; margin-left: -500px;}

Assumindo que sua div inner terá 1000px de largura mas você também poderá ajustar para qualquer tamanho sempre colocando a metade no margin-left.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .