3 techniques CSS contemporaines pour centrer les éléments

Avant, centrer des éléments avec HTML et CSS était assez difficile à réaliser. Eh bien, ce n'est plus le cas. Il existe désormais de nombreuses façons différentes de procéder. Et c’est une bonne chose car nous pourrions avoir besoin de différentes options selon les scénarios. Dans cette vidéo, nous examinerons trois de mes façons préférées de centrer des éléments. Nous utiliserons le positionnement, puis nous utiliserons flexbox et enfin, nous utiliserons ma grille CSS préférée.

Très bien, allons-y.

C'est vraiment une chose tellement étrange qu'il ait été si difficile pendant si longtemps de simplement placer des éléments au centre d'un conteneur sur le Web. Eh bien, le centrage horizontal était facile, mais le centrage vertical était presque impossible jusqu'à ces dernières années.

Utilisation du positionnement CSS pour centrer les éléments

Cette première méthode, utilisant le positionnement CSS, existe probablement depuis le plus longtemps, mais elle a un peu évolué à mesure que de nouvelles propriétés sont apparues. Regardons un exemple.

Nous avons ici cette boîte que nous voulons centrer dans cet autre conteneur avec la bordure rouge. C'est un élément fort et il est placé directement dans un élément div qui est cette boîte rouge que nous voyons ici.

Nous allons utiliser le positionnement absolu pour cette méthode, ajoutons-le donc à notre élément strong .

 strong { position: absolute; }

Maintenant, pour que cela fonctionne correctement, notre div devra créer un contexte de positionnement sur lequel notre élément sera positionné. Il existe de nombreuses façons différentes de procéder, mais la meilleure option pour cet exemple est d'utiliser le positionnement relatif.

 div { position: relative; }

Nous pouvons désormais positionner notre élément sur cinquante pour cent de la hauteur de notre div et sur plus de cinquante pour cent de sa largeur. Pour nous positionner du haut en bas, nous pouvons utiliser la nouvelle propriété logique, inset-block-start avec une valeur de cinquante pour cent. Et, pour nous positionner à partir de la gauche, nous pouvons utiliser inset-inline-start avec la même valeur de cinquante pour cent.

 strong { ... inset-block-start: 50%; inset-inline-start: 50%; } 

Ok, donc ce n'est pas exactement centré, n'est-ce pas ?

Eh bien, c'est parce que nous avons positionné l'élément au centre de notre div , mais sa position est basée sur son coin supérieur gauche. Ce que nous devons faire maintenant, c'est déplacer l'élément vers le haut de cinquante pour cent de sa hauteur et vers l'arrière sur cinquante pour cent de sa largeur. Cela le placera correctement au centre. Mais comment pouvons-nous faire cela ?

C'est en fait très simple. Nous pouvons utiliser la nouvelle propriété CSS translate . La première valeur se traduira le long de l'axe des x. Nous devons revenir en arrière de cinquante pour cent, nous ajouterons donc une valeur de moins cinquante pour cent. Et, la deuxième valeur se traduisant le long de l'axe y, nous lui donnerons la même valeur de moins cinquante pour cent.

 strong { ... translate: -50% -50%; } 

Et voilà. Parfaitement centré.

Voici le dernier exemple de travail utilisant le positionnement et la traduction :

C’est donc une façon de procéder, mais ce n’est pas ma préférée.

Utiliser Flexbox pour centrer les éléments

Si je peux, je préfère utiliser Flexbox plutôt que le positionnement car c'est encore plus simple, nécessite moins de lignes de code, aucun contexte de positionnement et, honnêtement, cela semble être une solution meilleure et plus moderne. Regardons un exemple.

Ok, donc nous partons du même point, nous avons notre div externe avec la bordure rouge puis notre élément fort interne.

Nous commençons par faire de notre div un conteneur flexible avec affichage, flex. Ensuite, nous pouvons aligner notre élément au centre le long de l'axe des x avec la propriété justify-content et une valeur de centre. Et enfin, nous pouvons aligner le long de l'axe y avec la propriété align-items et la même valeur de center.

 div { display: flex; justify-content: center; align-items: center; } 

Et voilà, l’élément est bien centré et il n’a fallu que trois lignes de code pour y arriver cette fois.

Voici le dernier exemple de travail utilisant Flexbox :

C'est donc cool et j'ai parfois besoin de le faire, mais ma façon préférée de positionner les éléments au centre est d'utiliser la grille CSS. Et encore une fois, mes raisons sont que c'est encore plus simple que flex et nécessite encore moins de code.

Utiliser la grille pour centrer les éléments

Ok, même point de départ avec la boîte rouge et l'élément intérieur.

Cette fois, nous allons faire de notre div un conteneur de grille avec une valeur d' display de grid . Maintenant, ce qui est cool ici, c'est que nous pouvons utiliser les deux mêmes propriétés que celles que nous avons utilisées pour notre exemple flexbox si nous le souhaitons. Nous pouvons ajouter justify-content: center et align-items: center . Cela fonctionne exactement de la même manière.

 div { display: grid; justify-content: center; align-items: center; }

C'est plutôt drôle, mais c'est juste la façon dont fonctionne la grille, elle peut utiliser les mêmes propriétés d'alignement de boîte que flexbox. Mais si nous laissions les choses ainsi, il n’y aurait vraiment aucun avantage à utiliser la grille, n’est-ce pas ?

Eh bien, ce que nous pouvons faire à la place, c'est supprimer ces propriétés d'alignement et les remplacer par la propriété place-items. Et, on peut donner à ce bien une valeur de centre.

 div { display: grid; place-items: center; } 

Et voilà, nous l'avons maintenant réduit à seulement deux lignes de CSS.

Voici le dernier exemple de travail utilisant CSS Grid :

Conclusion

Donc, comme je l'ai dit plus tôt, c'est beaucoup plus facile qu'avant, c'est sûr. Mais toutes ces techniques restent très pertinentes et peuvent être nécessaires en raison de nombreuses circonstances, il est donc bon de toutes les connaître au cas où. Je préférerais certainement le moins de grille CSS de code, et si cela ne fonctionne pas, la meilleure solution, flexbox, et si aucun de ceux-ci ne fonctionne, essayez le positionnement.