Centralizando DIV's horizontalmente com CSS

Uma grande dúvida que sempre existiu é como centralizar uma DIV tanto verticalmente quanto horizontalmente, usando CSS. Neste artigos Veremos alguns dos principais métodos mais utilizados para que você possa escolher e método que se encaixa melhor com a sua necessidade.

Posicionamento Horizontal

Existem diferentes métodos para o posicionamento de elementos horizontalmente, sendo normalmente divididos nas categorias "largura definida" e "largura variável", pois a escolhe do melhor método dependendo da necessidade e o código HTML.

Largura Definida

Confira abaixo 2 métodos para centralizar elementos com largura definida (em pixels, porcentagem, etc)

Margem Automática

Este método consiste em informar o valor 'auto' para as propriedades de margin-left e margin-right que vai calcular automaticamente a diferença de espaço restante entre a largura do elemento externo e interno, centralizando o o elemento horizontalmente.

#interna {
margin: 0 auto;
width: 50%; /* Valor da Largura */
} Exemplo

Display: Flex

Embora este método ser considerado o mais recomendado por muitos, ele tem o problema de utilizar a função CSS3 "display: flex" que não é suportada por alguns navegadores, por este motivo ainda considerado muito instável para ser utilizado.
Obs: Este método também pode ser utilizado para posicionamento Vertical.

#externa {
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
#interna {
width: 200px; /* Valor da Largura do elemento */
}
Exemplo

Largura Variável

Confira abaixo duas maneiras para posicionar horizontalmente um elemento de largura variável ou elementos que não podem ter larguras definidas.

CSS Transform

Um dos métodos mais simples, seu único problema é o uso da propriedade "transform" que só é suportada por navegadores com suporte a funções CSS3.

#externa {
position: relative;
width: 100%;
}
#interna {
left: 50%;
position: absolute;
transform: translateX(-50%);
}
Exemplo

inline-block

Neste método, o que permite que o elemento "#interna" fique centralizado é a presença da propriedade "text-align:center" no elemento externo, mas é importante ressaltar que este método não funcionará no navegador Internet Explorer 7 ou inferior pois eles não suportam essa propriedade.

#externa {
text-align: center;
width: 100%;
}
#interna {
display: inline-block
}
Exemplo

Posicionamento Vertical

Display: table-cell

Este método utiliza a propriedade display: table na DIV externa e as propriedades display:table-cell e vertical-align: middle na div interna para que os elementos se comportem como elementos de tabela, permitindo que o conteúdo seja centralizado normalmente.

#externa {
width: 400px;
height: 400px;
background: #ccc;
display:table;
}
#interna {
text-align: center;
vertical-align:middle;
display:table-cell;
}
Exemplo

Posição Absoluta

Este método consiste em definir a posição top e left como 50% e através da margem mover o elemento para a esquerda e para cima e metade da largura e da altura total do elemento. Por exemplo, se um elemento tem 200px de largura e 100px de altura, colocaremos os valores de margin-left: -100px (200px / 2) e margin-top: -50px (100px / 2)

#externa {
position: relative;
width:100%;
height:200px;
background:#E4EE91;
}
#interna {
left:50%;
top:50%;
margin-left:-100px; /* Metade do valor da Largura */
margin-top:-50px; /* Metade da valor da Altura */
position:absolute;
width:200px; /* Valor da Largura */
height:100px; /* Valor da Altura */
background:#507701;
color:#fff;
} Exemplo