Centralizando DIVs com CSS
CSS - Centralizar DIVs com CSS de forma simplesCentralizando 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;
}
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
Criação e Diagramação