Centrer la div HTML avec CSS

Il est assez difficile de centrer des divs en HTML, surtout horizontalement et verticalement. Mais dans cet article, je vais vous aider !

Exemple de code avec explication :

Disons qu'il existe un div avec la classe myDiv :

<div class="myDiv">hello dev</div>

Maintenant,
Centrer horizontalement à l'aide de CSS :
Pour centrer ce div horizontalement nous pouvons utiliser ce code CSS :

.myDiv {
  padding: 0 100%;
}

Dans ce code CSS, remplissage : 0 100% ; définit le remplissage de l'axe X à 100 % (largeur plein écran) pour centrer le div horizontalement.

Centrer verticalement à l'aide de CSS :
Pour centrer ce div verticalement nous pouvons utiliser ce code CSS :

.myDiv {
  padding: 100% 0;
}

Dans ce remplissage de code CSS : 100 % 0 ; définit le remplissage de l'axe Y à 100 % (hauteur plein écran) pour centrer le div verticalement.

Centrer horizontalement et verticalement à l'aide de CSS :
Maintenant, centrons-le verticalement et horizontalement en utilisant CSS.
Utilisons ce code :

.myDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100% 0;
}

Dans cet affichage de code : flex; définit le mode d'affichage sur flexbox, ce qui est important pour que cela fonctionne. Puis justifiez-content: center; justifie le contenu pour centrer et aligner les éléments : center ; aligne les éléments au centre. Ils travaillent ensemble pour centrer horizontalement le div. Enfin remplissage : 100 % 0 ; ajoute un remplissage de 100 % à l'axe Y (hauteur plein écran) pour centrer le div verticalement comme avant. En rassemblant le tout, ils centrent la div verticalement et horizontalement.

Il s'agissait de centrer les divs à l'aide de CSS, en savoir plus

Utilisation de TailwindCSS :

Oui, je ne peux pas terminer cet article sans vous dire d'utiliser TailwindCSS. C'est mon framework préféré car il m'a beaucoup aidé en tant que débutant.

Centreons le div en utilisant TailwindCSS,
Horizontalement :
Utiliser TailwindCSS pour centrer un div horizontalement peut être effectué en utilisant ce code :

<div class="flex items-center">hello dev</div>

Dans ce code, la classe TailwindCSS flex définit l'affichage sur flexbox et items-center centre l'élément horizontalement.

Verticalement :
Utiliser TailwindCSS pour centrer verticalement un div peut être effectué en utilisant ce code :

<div class="h-screen flex items-center">hello dev</div>

Dans ce code, la classe TailwindCSS h-screen crée le div en utilisant la hauteur plein écran, la classe flex définit l'affichage sur flexbox et items-center centre l'élément.

Verticalement et horizontalement :

<div class="h-screen flex items-center justify-center">hello dev</div>

Dans ce code, la classe h-screen crée le div en utilisant la hauteur plein écran, la classe flex définit l'affichage sur flexbox, items-center centre l'élément et justification-center justifie l'élément au centre. Rassembler le tout centre le div à la fois verticalement et horizontalement.

C'est tout pour centrer les divs à l'aide de TailwindCSS, en savoir plus

Conclusion:

Le centrage des divs peut faire ressortir les éléments de votre site Web et c'est ainsi que vous centrez un div HTML.

Assurez-vous de pratiquer et de ne pas dépendre entièrement des propriétés de mémorisation. Bonne journée :)

Bonjour, je suis étudiant et j'adore programmer. Si mes articles vous aident et que vous souhaitez faire un don, merci car cela soutiendra mes études et m'aidera à atteindre mon objectif ! Faites un don de Nabir14

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!