Entrar Ainda não tem acesso?
1
resposta

margin: 0 auto em objetos absolute

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação, no capítulo Posicionamento dos elementos e atividade Posicionando o cabeçalho

por Marlon Felipe dos Passos
| 38.2k xp | 5 posts

Olá no video ele mostra que da para centralizar objetos automaticamente usando o 

margin: 0 auto

Só que eu tentando essa tecnica com objetos na posição ABSOLUTE ela não faz nada. Tem alguma maneira de centralizar os objetos automaticamente nesse tipo de posicionamento?

meu codigo de exemplo: HTML

<!DOCTYPE html>
<html lang="pt-br" >
    <head>
        <meta charset="UTF-8">
        <title>Texte</title>
        <link rel="stylesheet" href="reset.css">
    </head>
    <body>
        <main class="menu">
            <div class="objeto1">
                <div class="objeto2">
                    <div class="objeto3"></div>
                </div>
            </div>
        </main>
    </body>
</html>

CSS 

.objeto1 {
    width:600px;
    height:600px;
    background: blue;
    position: relative;
    margin: 0 auto
}

.objeto2 {
    width:300px ;
    height:300px;
    background: red;
    position: absolute;
    margin: 50%
}

.objeto3 {
    width:100px ;
    height: 100px;
    background: green;    
    position: absolute;
    margin: 0 auto
}

Gostaria que o objeto verde ficasse bem no meio do objeto vermelho https://imgur.com/a/EztfnAh

1 resposta
por Felipe Miranda de Moura
| 134.5k xp | 9 posts

Cara eu meio que apanhei aqui. Mas fiz algo. Como o professor disse o posicionamento absoluto faz com que a caixa se desloque para fora ficando flutuando sobre o elemento. O posicionamento do item verde está absoluto sobre o azul. Por isso está dando problema. Fiz assim

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <title>Texte</title>
    <link rel="stylesheet" href="reset.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main class="menu">
      <div class="objeto1">
        <div class="objeto2">
          <div class="objeto3"></div>
        </div>
      </div>
    </main>
  </body>
</html>

CSS

body {
  width: 940px;
}
.objeto1 {
  width: 600px;
  height: 600px;
  position: relative;
  background: blue;
  margin: 0 auto;
}

.objeto2 {
  width: 300px;
  height: 300px;
  background: red;
  position: relative;
  margin: auto;
  top: 25%;
}

.objeto3 {
  width: 100px;
  height: 100px;
  background: green;
  position: absolute;
  left: 33%;
  top: 33%;
}

Coloquei o verde absoluto sobre o vermelho.