Flexbox ne se centre pas verticalement dans IE

J'ai une page Web simple avec du contenu Lipsum centré sur la page. La page fonctionne bien dans Chrome et Firefox. Si je réduis la taille de la fenêtre, le contenu remplit la fenêtre jusqu'à ce qu'il ne puisse pas, puis ajoute une barre de défilement et remplit le contenu hors de l'écran, vers le bas.

Cependant, la page n'est pas centrée dans IE11. Je peux centrer la page dans IE en fléchissant le corps, mais si je le fais, le contenu commence à sortir de l'écran vers le haut et coupe le haut du contenu.

Voici les deux scénarios. Voir les Fiddles associés. Si le problème n'est pas évident tout de suite, réduisez la taille de la fenêtre de résultats afin qu'elle soit obligée de générer une barre de défilement.

Remarque: cette application ne cible que les dernières versions de Firefox, Chrome et IE (IE11), qui prennent toutes en charge la recommandation candidate de Flexbox , la compatibilité des fonctionnalités ne devrait donc pas être un problème (en théorie).

Modifier : lorsque vous utilisez l'API Plein écran pour plein écran sur le div externe, tous les navigateurs centrent correctement en utilisant le CSS d'origine. Cependant, en quittant le mode plein écran, IE revient à être centré horizontalement et aligné verticalement en haut.

Edit : IE11 utilise une implémentation spécifique non-fournisseur de Flexbox. Mises à jour de la disposition de la boîte flexible («Flexbox»)

Centre et redimensionne correctement dans Chrome / FF, ne centre pas mais redimensionne correctement dans IE11

Violon: http://jsfiddle.net/Dragonseer/3D6vw/

html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
}

.outer
{
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
}

Centre correctement partout, coupe le haut lorsqu'il est redimensionné

Violon: http://jsfiddle.net/Dragonseer/5CxAy/

html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
    display: flex;
}

.outer
{
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
}

J'ai trouvé que le navigateur avait des problèmes pour aligner verticalement les conteneurs intérieurs, lorsque seul le style de hauteur minimale est défini ou lorsque le style de hauteur est absent du tout. Ce que j'ai fait, c'est d'ajouter un style de hauteur avec une certaine valeur et cela résout le problème pour moi.

par exemple :

.outer
    {
       display: -ms-flexbox;
       display: -webkit-flex;
       display: flex;

       /* Center vertically */
       align-items: center;

       /*Center horizontaly */
       justify-content: center;

       /*Center horizontaly ie */
       -ms-flex-pack: center;

        min-height: 220px; 
        height:100px;
    }

Nous avons donc maintenant un style de hauteur, mais la hauteur min l'écrasera. De cette façon, c'est heureux et nous pouvons toujours utiliser min-height.

J'espère que cela est utile pour quelqu'un.

Essayez d'emballer tout div avec lequel vous avez flexboxed flex-direction: columndans un conteneur qui est également flexbox.

Je viens de tester cela dans IE11 et cela fonctionne. Un correctif étrange, mais jusqu'à ce que Microsoft rende sa correction de bogue interne externe ... il faudra le faire!

HTML:

<div class="FlexContainerWrapper">
    <div class="FlexContainer">
        <div class="FlexItem">
            <p>I should be centered.</p>
        </div>
    </div>
</div>

CSS:

html, body {
  height: 100%;
}

.FlexContainerWrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.FlexContainer {
  align-items: center;
  background: hsla(0,0%,0%,.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  width: 600px;
}

.FlexItem {
  background: hsla(0,0%,0%,.1);
  box-sizing: border-box;
  max-width: 100%;
}

2 exemples à tester dans IE11: http://codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/

Voici ma solution de travail (SCSS):

.item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 120px;
  &:after{
    content:'';
    min-height:inherit;
    font-size:0;
  }
}

Juste au cas où quelqu'un arriverait ici avec le même problème que moi, qui n'est pas spécifiquement abordé dans les commentaires précédents.

J'avais margin: autosur l'élément intérieur qui l'a fait coller au bas de son parent (ou à l'élément extérieur). Ce qui a résolu le problème pour moi, c'est de changer la marge margin: 0 auto;.

Il s'agit d'un bogue connu qui semble avoir été corrigé en interne chez Microsoft.

https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview

La réponse originale de https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042

.flex-container{
min-height:100px;
display:flex;
align-items:center;
}

.flex-container:after{
content:'';
min-height:inherit;
font-size:0;
}

j'ai mis à jour les deux violons. j'espère que cela fera votre travail.

centrage

    html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
}

.outer
{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
    margin: 0 auto;
}

centre et défilement

html, body
    {
        height: 100%;
        width: 100%;
    }

    body
    {
        margin: 0;
        display:flex;
    }

    .outer
    {
        min-width: 100%;  
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .inner
    {
        width: 80%;
    margin-top:40px;
    margin: 0 auto;
    }

Je n'ai pas beaucoup d'expérience avec, Flexboxmais il me semble que la hauteur forcée sur les balises htmlet bodyfait disparaître le texte en haut lors du redimensionnement - je n'ai pas pu tester dans IE mais j'ai trouvé le même effet dans Chrome.

J'ai bifurqué votre violon et enlevé les déclarations heightet width.

body
{
    margin: 0;
}

Il semblait également que les flexparamètres devaient être appliqués à d'autres flexéléments. Cependant, en appliquant display: flexaux .innerproblèmes causés, j'ai explicitement défini le .innersur display: blocket défini .outersur flexpour le positionnement.

J'ai défini la .outerhauteur minimale pour remplir la fenêtre, le display: flex, et définir l'alignement horizontal et vertical:

.outer
{
    display:flex;
    min-height: 100%;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
}

Je me suis mis .innerà display: blockexplicitement. Dans Chrome, il semblait hérité flexde .outer. J'ai également défini la largeur:

.inner
{
    display:block;
    width: 80%;
}

Cela a résolu le problème dans Chrome, j'espère que cela pourrait faire la même chose dans IE11. Voici ma version du violon: http://jsfiddle.net/ToddT/5CxAy/21/

J'ai trouvé une bonne solution ce qui a fonctionné pour moi, vérifiez ce lien https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100 Premièrement, nous ajoutons un div parent, deuxièmement, nous changeons min-height: 100% en min- hauteur: 100vh. Il fonctionne comme un charme.

// by having a parent with flex-direction:row, 
// the min-height bug in IE doesn't stick around.
.flashy-content-outer { 
    display:flex;
    flex-direction:row;
}
.flashy-content-inner {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-width:100vw;
    min-height:100vh;
    padding:20px;
    box-sizing:border-box;
}
.flashy-content {
    display:inline-block;
    padding:15px;
    background:#fff;
}  

Si vous pouvez définir la largeur et la hauteur du parent, il existe un moyen plus simple de centraliser l'image sans avoir à créer un conteneur pour elle.

Pour une raison quelconque, si vous définissez la largeur minimale, IE reconnaîtra également la largeur maximale.

Cette solution fonctionne pour IE10 +, Firefox et Chrome.

<div>
  <img src="http://placehold.it/350x150"/>
</div>

div {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid orange;
    width: 100px;
    height: 100px;
}

img{
  min-width: 10%;
  max-width: 100%;
  min-height: 10%;
  max-height: 100%;
}

https://jsfiddle.net/HumbertoMendes/t13dzsmn/