Comment centrer les éléments verticalement et horizontalement dans Flexbox
Voici deux solutions générales de centrage.
Un pour les éléments flexibles alignés verticalement ( flex-direction: column) et l'autre pour les éléments flexibles alignés horizontalement ( flex-direction: row).
Dans les deux cas, la hauteur des divisions centrées peut être variable, indéfinie, inconnue, peu importe. La hauteur des divisions centrées n'a pas d'importance.
Voici le HTML pour les deux:
<div id="container"><!-- flex container -->
<div class="box" id="bluebox"><!-- flex item -->
<p>DIV #1</p>
</div>
<div class="box" id="redbox"><!-- flex item -->
<p>DIV #2</p>
</div>
</div>
CSS (à l'exclusion des styles décoratifs)
Lorsque les éléments flexibles sont empilés verticalement:
#container {
display: flex; /* establish flex container */
flex-direction: column; /* make main axis vertical */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
height: 300px;
}
.box {
width: 300px;
margin: 5px;
text-align: center; /* will center text in <p>, which is not a flex item */
}
DEMO
Lorsque les éléments flexibles sont empilés horizontalement:
Ajustez la flex-directionrègle à partir du code ci-dessus.
#container {
display: flex;
flex-direction: row; /* make main axis horizontal (default setting) */
justify-content: center; /* center items horizontally, in this case */
align-items: center; /* center items vertically, in this case */
height: 300px;
}
DEMO
Centrer le contenu des éléments flexibles
La portée d'un contexte de mise en forme flexible est limitée à une relation parent-enfant. Les descendants d'un conteneur flex au-delà des enfants ne participent pas à la disposition flex et ignoreront les propriétés flex. Essentiellement, les propriétés flex ne sont pas héritables au-delà des enfants.
Par conséquent, vous devrez toujours appliquer display: flexou display: inline-flexà un élément parent afin d'appliquer des propriétés flex à l'enfant.
Pour centrer verticalement et / ou horizontalement du texte ou un autre contenu contenu dans un élément flexible, faites de l'élément un conteneur flexible (imbriqué) et répétez les règles de centrage.
.box {
display: flex;
justify-content: center;
align-items: center; /* for single line flex container */
align-content: center; /* for multi-line flex container */
}
Plus de détails ici: Comment aligner verticalement du texte à l'intérieur d'une flexbox?
Vous pouvez également appliquer margin: autoà l'élément de contenu de l'élément flexible.
p { margin: auto; }
En savoir plus sur les automarges flexibles ici: Méthodes pour aligner les éléments flexibles (voir l'encadré # 56).
Centrage de plusieurs lignes d'éléments flexibles
Lorsqu'un conteneur flexible a plusieurs lignes (en raison de l'habillage), la align-contentpropriété sera nécessaire pour l'alignement transversal.
De la spécification:
8.4. Packing Flex Lines: la align-content
propriété
La align-contentpropriété aligne les lignes d'un conteneur flexible dans le conteneur flexible lorsqu'il y a de l'espace supplémentaire dans l'axe transversal, de la même manière que pour justify-contentaligner des éléments individuels sur l'axe principal.
Remarque, cette propriété n'a aucun effet sur un conteneur flexible à une seule ligne.
Plus de détails ici: Comment fonctionne le flex-wrap avec align-self, align-items et align-content?
Prise en charge du navigateur
Flexbox est pris en charge par tous les principaux navigateurs, à l' exception d'IE <10 . Certaines versions de navigateur récentes, telles que Safari 8 et IE10, nécessitent des préfixes de fournisseur . Pour ajouter rapidement des préfixes, utilisez le préfixe automatique . Plus de détails dans cette réponse .
Solution de centrage pour les anciens navigateurs
Pour une solution de centrage alternative utilisant la table CSS et les propriétés de positionnement, voir cette réponse: https://stackoverflow.com/a/31977476/3597276
