Le contenu de centrage vertical peut être mis en ?uvre dans CSS de diverses manières, le moyen le plus direct est d'utiliser Flexbox. 1. Utilisez Flexbox: en réglant le conteneur pour afficher: Flex et conjointement avec des éléments aligns: central, centrage vertical des éléments enfants peut être facilement réalisé; 2. Combinaison du positionnement et de la transformation absolues: Convient pour les éléments de positionnement absolu, en réglant le dessus et la gauche à 50%, puis en utilisant Traduction (-50%, -50%) pour atteindre le centrage; 3. CSS Grid: Grace à l'affichage: Grille et Items Place: Centre, horizontal et vertical peut être réalisé en même temps. Si seulement un centrage vertical est nécessaire, utilisez des éléments aligns: Centre. Ces méthodes sont compatibles avec les navigateurs modernes et sont très pratiques.

Centurer le contenu verticalement dans CSS peut être délicat, surtout parce qu'il se comporte différemment en fonction de la disposition et du contexte. Mais il existe plusieurs techniques fiables qui fonctionnent bien dans les navigateurs modernes.

Flexbox est la méthode la plus simple

L'utilisation de Flexbox est de loin le moyen le plus simple et le plus courant de centrer verticalement quelque chose. Tout ce dont vous avez besoin est un conteneur avec display: flex , puis utiliser align-items: center . Cela centre le contenu verticalement à l'intérieur du conteneur.

Par exemple:

 .Container {
  Affichage: flex;
  Align-Items: Centre;
  hauteur: 100px;
}

Cela fonctionne très bien pour des choses comme les boutons, les éléments de NAV ou les éléments au niveau du bloc où vous souhaitez que le contenu soit centré sur sa hauteur.

Une chose à garder à l'esprit: cela affecte tous les éléments flexibles à l'intérieur du conteneur, donc si vous voulez seulement centrer un article spécifique, assurez-vous qu'il est isolé dans son propre wrapper.

Positionnement absolu avec transformation

Si vous avez affaire à un élément absolument positionné, Flexbox ne vous aidera pas directement. Dans ces cas, une astuce populaire consiste à combiner position: absolute (ou fixed ) avec une transformation CSS.

Voici comment:

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

Cette technique fait descendre l'élément vers le bas et à droite de 50% de la taille du parent, puis la remonte et à gauche de la moitié de sa propre largeur et de sa taille - le centrant efficacement.

Il est particulièrement utile lorsque vous ne connaissez pas les dimensions exactes de l'élément que vous centrez, ce qui le rend plus flexible que la définition des marges manuellement.

Grid offre une autre solution propre

CSS Grid a également des fonctionnalités d'alignement intégrées qui vous permettent de centrer facilement le contenu. En définissant le conteneur pour display: grid et en utilisant place-items: center , vous obtiendrez un centrage vertical et horizontal en une seule ligne.

 .Container {
  Affichage: grille;
  Items de lieu: Centre;
  hauteur: 200px;
}

C'est une belle alternative à Flexbox, surtout si vous utilisez déjà la grille pour la mise en page. Il se comporte de la même manière mais maintient vos styles cohérents si la grille est votre outil de mise en page principal.

Notez simplement que place-items définissent l'alignement des lignes et de la colonne, donc si vous voulez seulement le centrage vertical, vous utiliseriez plut?t align-items: center .

Il existe également d'autres méthodes - comme utiliser des propriétés d'affichage de cellules de table ou JavaScript - mais celles ci-dessus sont les plus pratiques et les plus largement prises en charge aujourd'hui. Selon vos besoins en disposition et vos exigences de support du navigateur, Flexbox ou Grid seront généralement votre meilleur pari.

Fondamentalement, c'est tout.

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!