.parent{
position: relative;
}
.child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Estas propriedades são definidas no elemento criança. O posicionamento absoluto baseia a posição do elemento em relação ao elemento pai mais próximo que tem position: relative. Se não conseguir encontrar um, será relativo ao documento. Adicionar top: 50%; left: 50%; porque a posição é calculada a partir do canto superior esquerdo.
>/div>>>/div>
Deve-se puxar o item para trás com a metade da sua largura e altura. Pode conseguir isto com transform: translate(-50%, -50%);
Using Viewport Unit
.child{
margin: 50vh auto 0;
transform: translateY(-50%);
}
Usamos a margem esquerda/margem direita: auto; para a centralização horizontal e usamos o valor vh relativo para a centralização vertical. Naturalmente, é preciso puxar o item para trás como no exemplo absoluto (mas apenas traduzir a altura). Nota :- Este método só funciona se estiver a posicionar para o viewport principal.
Using Flexbox
.parent{
display: flex;
justify-content: center;
align-items: center;
}
Configurar o pai(ou contentor) para display: flex; permite que o browser saiba que pretendemos que as crianças utilizem a flexbox para a sua disposição. Justify-content determina como espaçar o seu conteúdo na sua linha ou coluna. Align-content é semelhante a justify-content, mas controla onde os itens estão no eixo transversal.
em vez de usar justificado-conteúdo e alinhado-items podemos usar margin: auto; na criança.
.parent{
display: flex;
min-height: 100vh;
}
.child{
margin: auto;
}
Usando a Grelha CSS
.parent{
display: grid;
grid-template-rows: 100vh;
grid-template-columns: 100vw;
}
.child{
justify-self: center;
align-self: center;
}
No conjunto dos pais display: grid;e especificar a largura da linha/coluna. Na criança, definir a justificação-eu e alinhar-se ao centro. A propriedade justifique-se e alinhe-se a si próprio define a forma como uma caixa é justificada dentro do seu contentor de alinhamento (pai) ao longo do eixo apropriado.
Siga-me no Twitter, LinkedIn ou GitHub.
p>espero que este artigo lhe seja útil. Obrigado por ler & Mantenha a Codificação !!