Comment utiliser Flexbox pour obtenir un effet de centrage en CSS

Cet article présente principalement des exemples de Flexbox en CSS pour obtenir l'effet de centrage. Faites attention aux problèmes de compatibilité dans les navigateurs IE. Les amis dans le besoin peuvent s'y référer

L'orientation future du développement de CSS est d'utiliser. Flexbox. Une conception qui résout les problèmes courants comme le centrage vertical. Veuillez noter que Flexbox a plusieurs façons de centrer. Il peut également être utilisé pour diviser des colonnes et résoudre des problèmes de mise en page étranges.

.Center-Container.is-Flexbox {   
  display: -webkit-box;   
  display: -moz-box;   
  display: -ms-flexbox;   
  display: -webkit-flex;   
  display: flex;   
  -webkit-box-align: center;   
     -moz-box-align: center;   
     -ms-flex-align: center;   
  -webkit-align-items: center;   
          align-items: center;   
  -webkit-box-pack: center;   
     -moz-box-pack: center;   
     -ms-flex-pack: center;   
  -webkit-justify-content: center;   
          justify-content: center;   
}

Avantages :

Le contenu peut avoir n'importe quelle hauteur et largeur, et le débordement fonctionnera bien
Peut être utilisé pour diverses techniques de mise en page avancées

Remarque également : IE8-9 n'est pas pris en charge

Nécessité d'écrire des styles sur le corps ou de nécessiter des conteneurs supplémentaires
Divers préfixes de fabricant sont requis pour être compatible avec les navigateurs modernes
Il peut y avoir des problèmes de performances potentiels Question

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser CSS3 pour créer un style de barre de progression colorée

Analyse du positionnement et du flottement CSS3

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!