.parent{
position: relative;
}
.child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Queste proprietà sono impostate sull’elemento figlio. Il posizionamento assoluto basa la posizione dell’elemento rispetto al più vicino elemento padre che ha position: relative. Se non ne trova uno, sarà relativo al documento. Aggiungete top: 50%; left: 50%; perché la posizione è calcolata dall’angolo in alto a sinistra.
È necessario tirare indietro l’elemento con la metà della sua larghezza e altezza. Potete ottenerlo con transform: translate(-50%, -50%);
Usando l’unità Viewport
.child{
margin: 50vh auto 0;
transform: translateY(-50%);
}
Usiamo il margin-left/margin-right: auto; per la centratura orizzontale e usiamo il valore relativo vh per la centratura verticale. Naturalmente, dovete tirare indietro l’elemento come nell’esempio assoluto (ma solo tradurre l’altezza). Nota :- Questo metodo funziona solo se state posizionando alla viewport principale.
Usando Flexbox
.parent{
display: flex;
justify-content: center;
align-items: center;
}
Impostare il genitore (o contenitore) a display: flex; permette al browser di sapere che vogliamo che i figli usino flexbox per il loro layout. Justify-content determina come spazializzare il contenuto nella riga o nella colonna. Align-content è simile a justify-content, ma controlla dove gli elementi sono sull’asse trasversale.
Invece di usare justify-content e align-items possiamo usare margin: auto; in child.
.parent{
display: flex;
min-height: 100vh;
}
.child{
margin: auto;
}
Utilizzando CSS Grid
.parent{
display: grid;
grid-template-rows: 100vh;
grid-template-columns: 100vw;
}
.child{
justify-self: center;
align-self: center;
}
Sul genitore impostare display: grid;e specificare la larghezza di riga/colonna. Sul figlio impostate justify-self e align-self al centro. Le proprietà justify-self e align-self impostano il modo in cui una casella è giustificata all’interno del suo contenitore di allineamento (genitore) lungo l’asse appropriato.
Seguimi su Twitter, LinkedIn o GitHub.
Spero che questo articolo ti sia utile. Grazie per aver letto & Continua a codificare !!