Absoluto Centralização em CSS

.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>

created using draw.io

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 !!

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *