cinq méthodes de grille CSS pour centrer horizontalement et verticalement une div

Cet article explore cinq techniques de grille CSS pour centrer une div à la fois horizontalement et verticalement. Ces méthodes sont applicables à tout élément HTML. Nous allons également aborder brièvement Flexbox et Centering basé sur la transformation, qui ont été couverts ailleurs.

Prise des clés:

• CSS Grid propose cinq fa?ons efficaces de centrer une div: place-self, place-items, place-content, des marges automatiques et des zones de grille.
• place-self centres des éléments de grille individuels, laissant d'autres éléments libres pour se positionner différemment. Il combine justify-self (horizontal) et align-self (vertical).
• place-items s'applique au conteneur de la grille, idéal lorsque tous les éléments ont besoin de placement identique. C'est une sténographie pour justify-items et align-items.
• place-content Aligne le contenu du conteneur de grille entier, traitant tous les éléments comme un groupe unique. Il combine justify-content et align-content.
• Les marges automatiques ont permis au navigateur de calculer et de distribuer l'espace environnant, centrant la div dans sa cellule de grille.

Configuration:

Nous commencerons avec un conteneur et un élément de bo?te simple (le div) pour la démonstration. Voici le HTML:

<article>
  <div></div>
</article>

et le CSS initial:

article {
  width: 100%;
  min-height: 100vh;
  background: black;
  display: grid;
}

div {
  width: 200px;
  background: yellow;
  height: 100px;
}

Tous les exemples utilisent display: grid, en établissant l'élément article comme conteneur de grille. Le conteneur est fabriqué large et haut pour fournir un espace suffisant.

Méthodes de centrage:

1. place-self: Cela centre facilement un élément de grille dans sa cellule.

article {
  display: grid;
}

div {
  place-self: center;
}

[Demo de codepen: centrage à l'aide de la grille et du lieu-soi] (lien vers le codepen)

place-self est un raccourci pour justify-self et align-self. Expérimentez avec ces propriétés individuelles dans la démo de codepen. Il est préférable de centrer des éléments individuels tout en permettant aux autres d'être positionnés différemment.

2. place-items: Cela centre tous les éléments de la grille dans leurs cellules.

article {
  display: grid;
  place-items: center;
}

[Demo de codepen: centrer un élément avec la grille CSS et les éléments de place] (lien vers le codepen)

place-items est un raccourci pour justify-items et align-items. Ajoutez plus de divs à la démo de codepen pour voir comment ils se sont tous centrés.

3. place-content: Ceci centre l'intégralité du contenu de la grille en groupe.

<article>
  <div></div>
</article>

[Demo de codepen: centrer un élément avec la grille CSS et le contenu de lieu] (lien vers le codepen)

place-content est un raccourci pour justify-content et align-content. Expérimentez les valeurs space-around et space-evenly comme alternatives à center.

4. Marges automobiles: Ceci utilise le calcul automatique de la marge pour le centrage.

article {
  width: 100%;
  min-height: 100vh;
  background: black;
  display: grid;
}

div {
  width: 200px;
  background: yellow;
  height: 100px;
}

[Demo de codepen: centrer un élément avec la grille CSS et les marges auto] (lien vers Codepen)

Cette technique simple permet au navigateur de gérer l'espacement.

5. Zones de grille: Cette méthode utilise une grille multi-rang / colonne pour un placement précis.

article {
  display: grid;
}

div {
  place-self: center;
}

[Demo de codepen: Centre A Div avec grille CSS] (lien vers Codepen)

Alternativement, en utilisant des zones de grille nommées:

article {
  display: grid;
  place-items: center;
}

[Demo de codepen: Centre une div avec grille CSS en utilisant les zones nommées] (lien vers le codepen)

Conclusion:

Toutes les méthodes centrent efficacement une div. place-self et les marges auto sont pratiques pour le ciblage des éléments directs. Choisissez la méthode la mieux adaptée à votre complexité de mise en page et à vos besoins. N'oubliez pas que ces techniques fonctionnent sur des éléments au-delà des div. Les exemples utilisent un div vide, mais l'ajout de contenu maintient le centrage.

(Section FAQs supprimée car elle était largement répétitive et les réponses de la question étaient déjà implicitement couvertes dans l'article.)

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!