Centralizar DIVs na horizontal e vertical com CSS | Centralizando DIVs com CSS
Centralizando DIVs com CSS
CSS - Centralizar DIVs com CSS de forma simples
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.
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.
Confira abaixo 2 métodos para centralizar elementos com largura definida (em pixels, porcentagem, etc)
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 {
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 {
Confira abaixo duas maneiras para posicionar horizontalmente um elemento de largura variável ou elementos que não podem ter larguras definidas.
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.
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.
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.
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)