Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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?>
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!
@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 /
/ HTML /