web-dev-qa-db-fra.com

CSS flexbox centrer verticalement / horizontalement l'image SANS définir explicitement la hauteur du parent

Avec niquement le parent div et les enfants img comme indiqué ci-dessous, comment puis-je verticalement et centrer horizontalement l'élément img alors que explicitement non définir le height du parent div?

<div class="do_not_define_height">
 <img alt="No, he'll be an engineer." src="theknack.png" />
</div>

Je ne suis pas trop familier avec flexbox, donc tout va bien si flexbox remplit toute la hauteur, mais aucune autre propriété non liée.

cssflexbox
44
John

Sans définir explicitement le height, j’ai déterminé que j’avais besoin d’appliquer la valeur flex au parent et grand-parent div éléments ...

<div style="display: flex;">
<div style="display: flex;">
 <img alt="No, he'll be an engineer." src="theknack.png" style="margin: auto;" />
</div>
</div>

Si vous utilisez un seul élément parent, utilisez ce qui suit:

align-items: center;
display: flex;
justify-content: center;
19
John

Ajoutez simplement les règles suivantes à l'élément parent:

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

Voici un exemple de démonstration (fenêtre redimensionnée pour voir l'image aligner)

support du navigateur pour Flexbox est actuellement assez bon.

Pour la compatibilité entre navigateurs pour display: flex et align-items, vous pouvez également ajouter l'ancienne syntaxe flexbox:

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
90
Danield