[Resolvido] COMO centralizar um Pop-up de forma responsiva?

[kaionr 0]

Olá, estou com uma dificuldade para posicionar um elemento. 

Se trata de um pop-up que aparece na tela ao clicar. Acontece que esse pop-up não fica centralizado em todas as telas dependendo da resolução.

No momento estou usando o position absolute, a div é essa abaixo: 

.form-structor {
  background-color: #222;
  border-radius: 15px;
  height: 550px;
  width: 450px;
  position: absolute;
  top: -100px;
  left: 170px;
  overflow: hidden;
}

Também já tentei:

{position: relative; top: 50%; left: 50%;}

 

 

Alguém pode me ajudar? 

Qual propriedade eu utilizo para ficar centralizado tanto horizontal e quanto vertical em qualquer resolução?

[Public2004 79]

@kaionr Boas jovem, uma sugestão é trabalhar com flex. Através desse método facilita o alinhamento tanto vertical como horizontal do seu popup, precisa de um container para ele, algo como:

/* CSS */
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: fixed;
}
.popup {
  background-color: #222;
  border-radius: 15px;
  height: 100px;
  width: 100px;
}

/* HTML */
<div class="wrapper">
  <div class="popup">
  </div>
</div>

Em se tratando de um elemento que será ativado através de click, lembre-se de deixá-lo oculto e defina também o depth (profundidade / z-index) do elemento para sobrepor aos demais qdo for invocado.

 

Abs.

[kaioneresm 0]

20 hours ago, Public2004 said:

@kaionr Boas jovem, uma sugestão é trabalhar com flex. Através desse método facilita o alinhamento tanto vertical como horizontal do seu popup, precisa de um container para ele, algo como:

/* CSS */
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: fixed;
}
.popup {
  background-color: #222;
  border-radius: 15px;
  height: 100px;
  width: 100px;
}

/* HTML */
<div class="wrapper">
  <div class="popup">
  </div>
</div>

Em se tratando de um elemento que será ativado através de click, lembre-se de deixá-lo oculto e defina também o depth (profundidade / z-index) do elemento para sobrepor aos demais qdo for invocado.

 

Abs.

 

Obrigado amigo, funcionou!