WebCis - Servios de criao sites, marketing digital e sistemas web.

SIGA-NOS
Solicite um oramento

Dicas para Criao de sites

Centralizando DIVs com CSS

Publicidade

Centralizando DIV's horizontalmente com CSS

Uma grande dvida que sempre existiu como centralizar uma DIV tanto verticalmente quanto horizontalmente, usando CSS. Neste artigos Veremos alguns dos principais mtodos mais utilizados para que voc possa escolher e mtodo que se encaixa melhor com a sua necessidade.

Posicionamento Horizontal

Existem diferentes mtodos para o posicionamento de elementos horizontalmente, sendo normalmente divididos nas categorias "largura definida" e "largura varivel", pois a escolhe do melhor mtodo dependendo da necessidade e o cdigo HTML.

Largura Definida

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

Margem Automtica

Este mtodo consiste em informar o valor 'auto' para as propriedades de margin-left e margin-right que vai calcular automaticamente a diferena de espao restante entre a largura do elemento externo e interno, centralizando o o elemento horizontalmente.

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

Embora este mtodo ser considerado o mais recomendado por muitos, ele tem o problema de utilizar a funo CSS3 "display: flex" que no suportada por alguns navegadores, por este motivo ainda considerado muito instvel para ser utilizado.
Obs: Este mtodo tambm 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
Elemento

Largura Varivel

Confira abaixo duas maneiras para posicionar horizontalmente um elemento de largura varivel ou elementos que no podem ter larguras definidas.

CSS Transform

Um dos mtodos mais simples, seu nico problema o uso da propriedade "transform" que s suportada por navegadores com suporte a funes CSS3.

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

Neste mtodo, o que permite que o elemento "#interna" fique centralizado a presena da propriedade "text-align:center" no elemento externo, mas importante ressaltar que este mtodo no funcionar no navegador Internet Explorer 7 ou inferior pois eles no suportam essa propriedade.

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

Posicionamento Vertical

Display: table-cell

Este mtodo 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 contedo seja centralizado normalmente.

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

Este mtodo consiste em definir a posio top e left como 50% e atravs 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
Elemento
Publicidade
Postado por: Arthur Di Polito
Criação e Diagramação 

 

Assine nosso feeds e receba notcias todas semanas

ltimos Clientes

[veja todos]