Neste artigo vamos aprender a centralizar uma div utilizando a técnica das margens negativas.
Ela consiste em aplicar um tamanho para nosso elemento e recuar a metáde desse valor.
Exemplo, se seu elemento tiver 200px de comprimento, deveremos recuar 100px.
Vou utilizar uma div com 200px de altura e largura conforme código abaixo.
div.exemplo {
background-color: tomato;
width:200px;
height:200px;
}
Veja ela aqui…
Vamos usar 50% nas propriedades top e left para tentar centralizar uma div no centro da página.
Nossa div ficará com o canto superior esquerdo apontando para o centro da página.
Mas ela ainda não está devidamente centralizada, o que devemos fazer para corrigir?
Você concegue perceber, visualemnte, que ela não está alinhada ?
Como nossa div mede 200px tanto de largura como de comprimento, basta aplicar uma margem negativa com a metade do valor.
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;