Flexbox zentriert sich nicht vertikal IE

Ich habe festgestellt, dass z. B. der Browser Probleme hat, innere Container vertikal auszurichten, wenn nur der Stil für die Mindesthöhe eingestellt ist oder wenn der Höhenstil überhaupt fehlt. Was ich getan habe, war Höhenstil mit etwas Wert hinzuzufügen und das Problem für mich zu beheben.

zum Beispiel : 

.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;
    }

Jetzt haben wir den Höhenstil, aber die Min-Höhe wird ihn überschreiben. Das ist zB glücklich und wir können immer noch Min-Höhe verwenden.

Hoffe, das ist für jemanden hilfreich.

Versuchen Sie, das beliebige div, das Sie mit Flexbox haben, mit flex-direction: column in einen Container einzuwickeln, der auch Flexbox ist.

Ich habe das gerade in IE11 getestet und es funktioniert. Eine seltsame Lösung, aber bis Microsoft die interne Fehlerbehebung extern durchführt, muss dies erledigt werden!

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 Beispiele, die Sie in IE11 testen können: http://codepen.io/philipwalton/pen/JdvdJEhttp://codepen.io/chriswrightdesign/pen/emQNGZ/

Dies ist ein bekannter Fehler, der intern bei Microsoft behoben wurde.

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

Nur für den Fall, dass jemand mit dem gleichen Problem hierher kommt, das in früheren Kommentaren nicht speziell angesprochen wurde.

Ich hatte margin: auto auf dem inneren Element, was dazu führte, dass es an der Unterseite des übergeordneten Elements (oder des äußeren Elements) haftete. Was für mich das Problem war, war, den Rand in margin: 0 auto; zu ändern.

ich habe beide Geigen aktualisiert. Ich hoffe, es wird deine Arbeit erledigen.

Zentrierung

    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;
}

zentrieren und scrollen

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;
    }

Ich habe nicht viel Erfahrung mit Flexbox, aber es scheint mir, dass die erzwungene Höhe der Tags html und body dazu führt, dass der Text oben verschwindet, wenn die Größe geändert wird. In IE kann nicht getestet werden, aber ich habe den gleichen Effekt in Chrome gefunden.

Ich habe deine Geige gespalten und die Erklärungen height und width entfernt.

body
{
    margin: 0;
}

Es sah auch so aus, als müssten die flex -Einstellungen auf andere flex -Elemente angewendet werden. Das Anwenden von display: flex auf .inner verursachte jedoch Probleme, so dass ich den .inner explizit auf display: block und den .outer auf flex für die Positionierung einstellte.

Ich habe die minimale .outer Höhe festgelegt, um das Ansichtsfenster zu füllen, den display: flex und die horizontale und vertikale Ausrichtung festgelegt:

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

Ich habe .inner explizit auf display: block gesetzt. In Chrome sah es so aus, als hätte es flex von .outer geerbt. Ich habe auch die Breite eingestellt:

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

Dies hat das Problem in Chrome behoben, hoffentlich auch in IE11. Hier ist meine Version der Geige: http://jsfiddle.net/ToddT/5CxAy/21/

Hier ist meine Arbeitslösung (SCSS):

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

Eine gute Lösung gefunden, die für mich funktioniert hat, überprüfen Sie diesen Link https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100 Zuerst fügen wir ein übergeordnetes div hinzu, zweitens ändern wir die höhe: 100% bis min-höhe: 100 vh. Es wirkt wie ein Zauber.

// 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;
}  

Wenn Sie die Breite und Höhe des übergeordneten Elements definieren können, gibt es eine einfachere Möglichkeit, das Bild zu zentralisieren, ohne dafür einen Container erstellen zu müssen.

Wenn Sie die minimale Breite definieren, erkennt IE auch die maximale Breite.

Diese Lösung funktioniert für IE10 +, Firefox und 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/