Plusieurs options de centrage CSS (résumé)

Cet article vous présentera plusieurs solutions de centrage CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

(Partage vidéo d'apprentissage : tutoriel vidéo CSS)

Centrage horizontal

Éléments en ligne

Pour centrer un élément en ligne (comme un lien, span ou img), l'utilisation de text-align: center est suffisante.

<div class="desk">
   <span class="plate"></span>
</div>

.desk {
  text-align: center;
}

Pour plusieurs éléments en ligne, vous pouvez également utiliser text-align：center:

<div class="desk">
   <span class="plate"></span>
   <span class="plate"></span>
</div>

.desk {
  text-align: center;
}

Flexbox

Vous pouvez également centrer rapidement des éléments à l'aide de flexbox :

.desk {
  display: flex;
  justify-content: center;
}

Pour plusieurs éléments en ligne, cela fonctionne également très bien :

Grille CSS

Lors de l'utilisation d'un conteneur de grille, les plaques de l'image seront centrées en fonction de leur zone de grille. Notez que cela ne fonctionnera pas avec plusieurs plaques, sauf si vous les enveloppez dans un seul élément.

.desk {
  display: grid;
  justify-content: center;
}

Élément de bloc

Marge automatique

La largeur et la hauteur sont connues Bloc les éléments peuvent être centrés en réglant margin-left:auto et margin-right:auto.

.plate {
  width: 120px;
  height: 120px;
  margin-left: auto;
  margin-right: auto;
}

Pour plusieurs éléments de bloc, ils doivent être enveloppés dans un seul élément, puis centrer cet élément parent.

.tray {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

Flexbox

Pour flexbox, justify-content:center est également utilisé pour centrer l'élément :

.desk {
  display: flex;
  justify-content: center;
}

Pour plusieurs éléments, nous n'avons pas besoin de les envelopper dans un seul élément, flexbox peut tous les centrer.

Positionnement CSS

Avec le positionnement absolu on peut facilement le centrer horizontalement via CSS transform.

.plate {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Des marges négatives peuvent être utilisées à la place des transformations CSS lorsque la largeur de l'élément est connue.

.plate {
  position: absolute;
  left: 50%;
  margin-left: -60px;
}

Centré verticalement

Élément en ligne

Remplissage vertical

Un L'un des moyens les plus simples de centrer verticalement un élément consiste à utiliser padding:

  padding-top: 24px;
  padding-bottom: 24px;
}

Alignement vertical

vertical-align L'attribut est disponible sur un ou plusieurs éléments.

Dans cet exemple, la fourchette et le couteau doivent être centrés verticalement sur la table.

.desk {
  text-align: center;
}

.plate,
.fork,
.knife {
  vertical-align: middle;
}

Flexbox

Pour aligner les assiettes, fourchettes et couteaux, nous pouvons utiliser flexbox :

.desk {
  display: flex;
  justify-content: center;
  align-items: center;
}

Bloquer les éléments

Positionnement absolu

En positionnant absolument un élément, vous pouvez centrer l'élément verticalement à l'aide de CSS transform :

.plate {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Si vous connaissez la hauteur de l'élément, vous pouvez utiliser des marges négatives au lieu de transform.

.plate {
  position: absolute;
  top: 50%;
  margin-top: -60px;
}

Grille CSS

Avec CSS Grid, nous pouvons utiliser align-items pour centrer un élément verticalement par rapport à sa zone de grille.

.desk {
  display: grid;
  align-items: center;
}

Centrage horizontal et vertical

Éléments en ligne

Rembourrage et Alignement du texte

.plate {
  text-align: center;
  padding-top: 24px;
  padding-bottom: 24px;
}

Autres types d'éléments

Positionnement absolu

.plate {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

Flexbox

Vous pouvez centrer les éléments verticalement et horizontalement grâce à justify-content:center et align-items:center :

.plate {
  display: flex;
  justify-content: center;
  align-items: center;
}

Grille CSS

Il peut être transmis via l'attribut place-items, qui combine justify-content et align-items :

.desk {
  display: grid;
  place-items: center;
}

更多编程相关知识，请访问：编程入门！！

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!