Pour centrer un div horizontalement et verticalement, 1. Il est recommandé d'utiliser Flexbox: Définissez l'affichage du conteneur: flex et coopérer avec les éléments de justification et d'alignement comme centre; 2. Utilisez la disposition de la grille: Définir l'affichage: grille et lieux-éléments: Centre; 3. Les méthodes traditionnelles peuvent utiliser le positionnement et la transformation: régler à gauche et en haut à 50% et traduire (-50%, -50%); Notez que le conteneur doit avoir une hauteur claire, définir raisonnablement le positionnement des parents et considérer le traitement de débordement de contenu.

Le fait de vouloir un div centrer horizontalement et verticalement dans la page est en fait une exigence CSS courante. Il existe de nombreuses fa?ons de la mettre en ?uvre, mais la manière la plus simple, moderne et pratique est d'utiliser les dispositions Flexbox ou Grid.

Centrage avec flexbox (recommandé)

Flexbox est l'une des méthodes les plus couramment utilisées à l'heure actuelle, particulièrement adaptées aux opérations d'alignement dans la disposition unidimensionnelle.

 .Container {
  Affichage: flex;
  Justification-contenu: centre; / * Centre horizontal * /
  Align-Items: Centre; / * Centre vertical * /
  Hauteur: 100VH; / * Le conteneur doit avoir une hauteur * /
}

Après ce paramètre, les éléments enfants .container seront automatiquement centrés.

Remarque: Si le conteneur parent n'a pas de hauteur claire, comme la simple height: 100% , assurez-vous que son élément supérieur a une hauteur réelle, sinon il peut ne pas prendre effet.

Centrer avec une grille (une autre solution moderne)

La grille CSS peut également être facilement centrée:

 .Container {
  Affichage: grille;
  Items de lieu: Centre;
  Hauteur: 100VH;
}

Ceci est écrit de manière plus simple, place-items sont l'abréviation des align-items et justify-items .

Méthode traditionnelle: transformée de positionnement

Si vous devez être compatible avec certains anciens navigateurs, ou si vous souhaitez simplement utiliser un positionnement absolu pour le contr?ler, vous pouvez utiliser la méthode suivante:

 .Center-div {
  Position: absolue;
  Gauche: 50%;
  en haut: 50%;
  Transformer: traduire (-50%, -50%);
}

Cette méthode convient aux éléments séparés du flux de documents, tels que les fenêtres contextuelles, les bo?tes d'invite, etc. Cependant, n'oubliez pas de définir position: relative au conteneur parent, sinon le positionnement sera basé sur la fenêtre.

Faites attention aux petits détails

• Si vous utilisez flex ou grid , sachez qu'ils affectent la fa?on dont les éléments enfants sont organisés et un espacement supplémentaire peut être nécessaire.
• Dans la conception réactive, trop de contenu dans l'élément centré peut dépasser la plage d'écran, n'oubliez pas d'ajouter un contr?le overflow .
• text-align et line-height peuvent également être centrés, mais c'est une autre affaire.

Fondamentalement, choisissez-en un qui convient à votre structure de projet actuelle.

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!