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

Buy Me a Coffee

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

3 techniques CSS contemporaines pour centrer les éléments

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Libérer la puissance de l’IA. Une revue systématique des techniques de pointe : résumé et introduction

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Nomades numériques, écoutez : ce que vous devez savoir sur le nouveau visa DTV de la Thaïlande

Comment améliorer votre flux de travail par 10 : 17 applications essentielles

Libérer la puissance de l’IA. Une revue systématique des techniques de pointe : résumé et introduction

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Nomades numériques, écoutez : ce que vous devez savoir sur le nouveau visa DTV de la Thaïlande

Comment améliorer votre flux de travail par 10 : 17 applications essentielles

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps