5

Não estou entendo o seguinte código:

div{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    background: red;
}

Exemplo online

Eu sei que definir top: 0 e bottom: 0 e setar uma largura o elemento vai esticar ocupando height: 100% do elemento pai(body), o mesmo com left: 0 e right: 0 (me corrijam se eu estiver errado). Mas oque eu não entendo é o margin: auto, alguém pode me explicar como ele vai centralizar o elemento no centro ?

3 Respostas 3

4

Para centralizar algo no centro da pagina existe várias técnicas.

Explicando o margin sua função como observado é definir uma margem para algum elemento, e quando seu valor esta auto quer dizer que o navegador irá definir a margem automaticamente, segue exemplo:

.quadrado{
  background-color: red;
  display: block;
  height: 100px;
  margin: 0 auto;
  width: 100px;
}
<div class="quadrado"></div>

Observe que estou utilizando margin: 0 auto o zero representa o margin-top e o margin-bottom, e o valor auto representa o margin-left e o margin-right resumindo é uma abreviação.

No meu exemplo as margens da direita e esquerdas estão automáticas e com isso o navegador defini automaticamente seu posicionamento, e quando o elemento é um bloco com largura definida ele centraliza horizontalmente.

Para alinhar horizontalmente e verticalmente eu utilizaria esta técnica:

body, .container, html{
  height: 100%;
}

.container{
  display: flex;
  align-items: center;
  justify-content: center;
}

.quadrado{
  background-color: red;
  display: inline-block;
  height: 100px;
  width: 100px;
}
<div class="container">
   <div class="quadrado"></div>
 </div>

Obs. Quando você defini margin: auto você esta atribuindo uma margin automática para top right bottom left

0
div{
    position: absolute;
    left: 50%;
    margin-left: -50px;
    width: 100px;
    height: 100px;
    background: red;
}

Este trecho de código deve resolver o seu problema.

-1

Olá, eu estava com essa dúvida também e coloquei na div com absolute o left e o right com -50%

div{
    position: absolute;
    top: 0;
    left: -50%;
    right: -50%;
    width: 100px;
    height: 100px;
    background: red;
}

No meu caso, não coloquei o bottom: 0;, mas pode ser que no seu caso seja necessário.

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .