Avant, centrer des éléments avec é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. HTML et CSS Très bien, allons-y. https://youtu.be/XMH4c1xIZtE?embedable=true 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 qui est cette boîte rouge que nous voyons ici. div 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 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 div { position: relative; } Nous pouvons désormais positionner notre élément sur cinquante pour cent de la hauteur de notre 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, avec une valeur de cinquante pour cent. Et, pour nous positionner à partir de la gauche, nous pouvons utiliser avec la même valeur de cinquante pour cent. div inset-block-start inset-inline-start 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 , 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 ? div C'est en fait très simple. Nous pouvons utiliser la nouvelle propriété CSS . 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. translate strong { ... translate: -50% -50%; } Et voilà. Parfaitement centré. Voici le dernier exemple de travail utilisant le positionnement et la traduction : https://codepen.io/brianmtreese/pen/PoLYmKW?embedable=true 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é et une valeur de centre. Et enfin, nous pouvons aligner le long de l'axe y avec la propriété et la même valeur de center. justify-content align-items 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 : https://codepen.io/brianmtreese/pen/bGZbWgW?embedable=true 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 et nécessite encore moins de code. flex 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' de . 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 et . Cela fonctionne exactement de la même manière. display grid justify-content: center align-items: center 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 : https://codepen.io/brianmtreese/pen/zYbOwoM?embedable=true 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. Également publié . ici

Cet audio est produit dans la langue originale de l'histoire !

Trop long; Pour lire

Making security fun one episode at a time

3 techniques CSS contemporaines pour centrer les éléments

Trop long; Pour lire

Brian Treese

About Author

ÉTIQUETTES

Languages

CET ARTICLE A ÉTÉ PARU DANS...

3 techniques CSS contemporaines pour centrer les éléments

Trop long; Pour lire

Brian Treese

About Author

ÉTIQUETTES

Languages

CET ARTICLE A ÉTÉ PARU DANS...

HISTOIRES CONNEXES