Comment centrer verticalement deux paragraphes dans un DIV ?

Comment centrer verticalement deux éléments dans un DIV

Défi : Centrer verticalement deux éléments de paragraphe dans un DIV s'est avéré difficile, malgré le respect des règles établies tutoriels.

Solution :

Il y a deux approches principales pour centrer verticalement des éléments dans un DIV : Flexbox et Table et positionnement CSS.

Méthode Flexbox

En utilisant Flexbox, vous pouvez obtenir un alignement précis avec un minimum de code :

#container {
  display: flex;              
  flex-direction: column;     
  justify-content: center;    
  align-items: center;        
  height: 300px;
  border: 1px solid black;
}

.box {
  width: 300px;
  margin: 5px;
  text-align: center;
}

Avantages de la méthode Flexbox :

• Minimal code
• Alignement simplifié
• Options de mise en page polyvalentes
• Conception réactive

Tableau CSS et méthode de positionnement

Une méthode alternative implique Tableaux CSS et positionnement :

body {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

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

.box {
  width: 300px;
  padding: 5px;
  margin: 7px auto;   
  text-align: center;
}

Quand utiliser Flexbox vs CSS Table et positionnement :

Flexbox est le choix recommandé en raison de son :

• Efficacité supérieure
• Capacités de mise en page complètes
• Prise en charge améliorée du navigateur

Flexbox facilite sans effort le centrage vertical et d'autres fonctions avancées tâches d'alignement, ce qui en fait le choix préféré pour le développement Web moderne.

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!