Comment puis-je centrer verticalement des éléments en CSS ?

Centrage vertical des éléments à l'aide de techniques CSS

Le centrage vertical des éléments dans un div peut être réalisé à l'aide de diverses méthodes CSS. Voici deux approches courantes :

Méthode Flexbox

Flexbox fournit un système de mise en page polyvalent qui permet un alignement flexible des éléments. Pour centrer verticalement des éléments à l'aide de Flexbox, procédez comme suit :

1. Définissez le conteneur parent pour qu'il ait un affichage flexible à l'aide de display: flex.
2. Spécifiez une direction flexible de la colonne pour empiler les éléments. verticalement.
3. Alignez les éléments verticalement à l'aide de justifier-content: center.

Par exemple, voici un Extrait CSS utilisant Flexbox :

#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Méthode de table et de positionnement

Cette méthode utilise l'affichage et le positionnement du tableau :

1. Définissez le corps sur un display: table pour établir la structure de type tableau.
2. Définissez le conteneur parent pour afficher : table-cell et vertical-align : middle pour aligner le contenu verticalement.
3. Centrez les éléments en utilisant margin : 0 auto.

Voici le code CSS de cette méthode :

body {
  display: table;
}

#container {
  display: table-cell;
  vertical-align: middle;
}

.box {
  margin: 0 auto;
}

Quelle méthode utiliser Choisir ?

Flexbox est généralement préféré en raison de sa simplicité, de son efficacité et de sa large gamme d'options de mise en page. Cependant, si la prise en charge des anciens navigateurs pose problème, la méthode du tableau et du positionnement peut être adoptée.

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!