.parent{
position: relative;
}
.child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Ces propriétés sont définies sur l’élément enfant. Le positionnement absolu base la position de l’élément par rapport à l’élément parent le plus proche qui possède position: relative. S’il n’en trouve pas, il sera relatif au document. Ajoutez top: 50%; left: 50%; car la position est calculée à partir du coin supérieur gauche.
Vous devez retirer l’élément avec la moitié de sa largeur et de sa hauteur. Vous pouvez y parvenir avec transform: translate(-50%, -50%);
Utilisation de l’unité Viewport
.child{
margin: 50vh auto 0;
transform: translateY(-50%);
}
Nous utilisons le margin-left/margin-right : auto ; pour le centrage horizontal et utilisons la valeur relative vh pour le centrage vertical. Bien sûr, il faut retirer l’élément comme dans l’exemple absolu (mais ne traduire que la hauteur). Note :- Cette méthode ne fonctionne que si vous positionnez sur le viewport principal.
Utiliser Flexbox
.parent{
display: flex;
justify-content: center;
align-items: center;
}
Mettre le parent(ou le conteneur) à display: flex; cela fait savoir au navigateur que nous avons l’intention que les enfants utilisent flexbox pour leur mise en page. Justify-content détermine comment espacer votre contenu dans votre ligne ou votre colonne. Align-content est similaire à justify-content, mais contrôle où les éléments sont sur l’axe transversal.
Au lieu d’utiliser justify-content et align-items, nous pouvons utiliser margin: auto; en enfant.
.parent{
display: flex;
min-height: 100vh;
}
.child{
margin: auto;
}
Utiliser la grille CSS
.parent{
display: grid;
grid-template-rows: 100vh;
grid-template-columns: 100vw;
}
.child{
justify-self: center;
align-self: center;
}
Sur le parent, définissez display: grid;et spécifiez la largeur de la ligne/colonne. Sur l’enfant, définissez les paramètres justify-self et align-self sur center. Les propriétés justify-self et align-self définissent la manière dont une boîte est justifiée à l’intérieur de son conteneur d’alignement(parent) selon l’axe approprié.
Suivez-moi sur Twitter, LinkedIn ou GitHub.
J’espère que cet article vous sera utile. Merci de votre lecture & Continuez à coder !!