Comment centrer une div horizontalement dans CSS

Dans HTML, Div est un élément essentiel et est utilisé excessivement dans le développement de sites Web. Cependant, la chose principale est de savoir comment un développeur utilise efficacement l'élément div pour atteindre son objectif; Est le div positionné correctement? Cela nécessite-t-il d'être aligné au centre? Ce sont les questions courantes qui peuvent se demander dans l'esprit des développeurs lorsqu'ils pensent à améliorer l'apparence d'une page Web.

Ce message couvrira la méthode d'alignement central d'une div horizontalement à l'aide de CSS.

Comment centrer une div horizontalement en utilisant CSS?

Pour centrer une div horizontalement, nous allons vérifier les propriétés CSS ci-dessous:

• propriété de marge
• Position des biens
• affichage des biens

Passons de l'avant et explorons les propriétés énumérées une par une.

Méthode 1: Utilisez une propriété de marge pour centrer une div horizontalement dans CSS

Dans CSS, le «marge»La propriété est utilisée pour créer de l'espace autour des éléments HTML en haut, en bas, à droite ou à gauche. Nous pouvons également utiliser la propriété de marge pour centrer les éléments, tels que div.

Pour ce faire, suivez l'exemple donné.

Exemple - Comment utiliser le rembourrage

Voici le conteneur de notre page HTML, et nous voulons l'aligner au centre horizontalement:

Dans notre fichier CSS, nous spécifierons le «frontière«Propriété comme valeur»0.2em solide«Pour voir notre élément div, utilisez le«largeur«Propriété le long de la valeur de«50%«Pour remplacer la largeur par défaut de notre div. Enfin, définissez le «marge«Propriété et spécifiez sa valeur comme«auto«Pour centrer la div horizontalement:

L'image fournie ci-dessous indique que nous avons réussi à aligner la div ajoutée au centre horizontalement:

Méthode 2: Utilisez la propriété de position pour centrer une div horizontalement dans CSS

Pour définir la position de différents éléments HTML, le «position»La propriété de CSS peut être utilisée. Cette propriété doit être combinée avec le «gauche»Propriété pour centrer une div horizontalement.

Regardez l'exemple pour une meilleure compréhension.

Exemple

Pour styliser notre conteneur, nous utiliserons le «position«Propriété et définit sa valeur comme«absolu". Ensuite, spécifiez le «gauche«Propriété avec la valeur»25%". Il créera un espace vacant sur le côté gauche et alignera la div au centre:

Sortir

Maintenant, vérifions la dernière méthode.

Méthode 3: Utilisez des propriétés d'affichage pour centrer une div horizontalement dans CSS

Le "afficher»La propriété contrôle comment l'élément sélectionné se comportera. Cette propriété a certaines valeurs majeures qui fournissent des fonctionnalités différentes, comme lorsque le «fléchir»La valeur est utilisée avec la propriété d'affichage pour rendre la boîte ou le conteneur flexible. De plus, vous pouvez également utiliser la propriété d'affichage avec le «align-items«Placer la div au centre horizontalement.

Exemple

Dans notre fichier HTML, nous avons ajouté une balise avec du texte:

Centre ce div

Utilisez le «afficher»Propriété avec le«fléchir”Valeur pour rendre le div flexible. Enfin, nous allons centrer la div en utilisant «align-items«Propriété et définit sa valeur comme«centre»:

Sortir

Nous avons compilé les méthodes les plus faciles pour centrer une div horizontalement dans CSS.

Conclusion

Pour centrer une div horizontalement, "afficher","position", et "marge»Les propriétés CSS peuvent être utilisées. La propriété d'affichage doit être combinée avec le «align-items«La propriété, et la propriété de position doit être utilisée avec le«gauche»Propriété pour centrer le div horizontalement. En revanche, la propriété de marge est elle-même suffisante pour placer la div au centre horizontalement. Cet article a discuté de différentes méthodes pour l'alignement du centre d'une div horizontalement.