Flexbox wird im IE nicht vertikal zentriert

Ich habe eine einfache Webseite mit einigen Lipsum-Inhalten, die auf der Seite zentriert sind. Die Seite funktioniert gut in Chrome und Firefox. Wenn ich die Größe des Fensters verkleinere, füllt der Inhalt das Fenster, bis es nicht mehr möglich ist, und fügt dann eine Bildlaufleiste hinzu und füllt den Inhalt außerhalb des Bildschirms nach unten.

Die Seite wird jedoch nicht in IE11 zentriert. Ich kann die Seite im IE zentrieren, indem ich den Körper biege. Wenn ich dies jedoch tue, wird der Inhalt vom Bildschirm nach oben verschoben und schneidet den oberen Rand des Inhalts ab.

Nachfolgend sind die beiden Szenarien aufgeführt. Siehe die zugehörigen Geigen. Wenn das Problem nicht sofort erkennbar ist, reduzieren Sie die Größe des Ergebnisfensters, sodass eine Bildlaufleiste generiert werden muss.

Hinweis: Diese Anwendung zielt nur auf die neuesten Versionen von Firefox, Chrome und IE (IE11) ab, die alle die Kandidatenempfehlung von Flexbox unterstützen. Daher sollte die Funktionskompatibilität (theoretisch) kein Problem darstellen.

Bearbeiten : Wenn Sie die Vollbild-API zum Vollbild des äußeren Bereichs verwenden, zentrieren alle Browser korrekt mit dem ursprünglichen CSS. Beim Verlassen des Vollbildmodus wird der IE jedoch wieder horizontal zentriert und vertikal oben ausgerichtet.

Bearbeiten : IE11 verwendet eine nicht herstellerspezifische Implementierung von Flexbox. Aktualisierungen des Layouts der flexiblen Box ("Flexbox")

Zentriert und ändert die Größe in Chrome / FF korrekt, zentriert nicht, ändert jedoch die Größe in IE11 korrekt

Geige: 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%;
}

Zentriert überall korrekt und schneidet bei Verkleinerung von oben ab

Geige: 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%;
}

Ich habe festgestellt, dass der Browser Probleme hat, innere Container vertikal auszurichten, wenn nur der Mindesthöhenstil festgelegt ist oder wenn der Höhenstil überhaupt fehlt. Was ich getan habe, war, einen Höhenstil mit einem gewissen Wert hinzuzufügen, und das behebt das Problem für mich.

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 also einen Höhenstil, aber die Mindesthöhe wird ihn überschreiben. Auf diese Weise ist dh glücklich und wir können immer noch Min-Höhe verwenden.

Hoffe das ist hilfreich für jemanden.

Versuchen Sie, das Div, mit dem Sie Flexboxed haben, flex-direction: columnin einen Container zu verpacken, der ebenfalls Flexboxed enthält.

Ich habe dies gerade in IE11 getestet und es funktioniert. Eine seltsame Lösung, aber bis Microsoft die interne Fehlerbehebung extern macht ... muss es reichen!

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 zum Testen in IE11: http://codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/

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

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

Ich hatte margin: autoauf dem inneren Element, was dazu führte, dass es am Boden des übergeordneten Elements (oder des äußeren Elements) klebte. Was es für mich behoben hat, war die Änderung der Marge auf margin: 0 auto;.

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

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

Die ursprüngliche Antwort von 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;
}

Ich habe beide Geigen aktualisiert. Ich hoffe, es wird Ihre 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 damit, Flexboxaber es scheint mir, dass die erzwungene Höhe der Tags htmlund dazu führt, bodydass der Text beim Ändern der Größe oben verschwindet. Ich konnte nicht im IE testen, fand aber den gleichen Effekt in Chrome.

Ich gabelte deine Geige und entfernte die heightund widthErklärungen.

body
{
    margin: 0;
}

Es schien auch so, als flexmüssten die Einstellungen auf andere flexElemente angewendet werden. Wenn ich mich jedoch display: flexauf die .innerverursachten Probleme beziehe, setze ich explizit das .innerauf display: blockund das .outerauf flexfür die Positionierung.

Ich habe die Mindesthöhe festgelegt .outer, um das Ansichtsfenster zu füllen 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 .innerhabe display: blockexplizit eingestellt. In Chrome, es sah aus wie es geerbt flexaus .outer. 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/

Wir haben eine gute Lösung gefunden, was 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 Mindesthöhe: 100% in Min. Höhe: 100vh. 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, können Sie das Bild einfacher zentralisieren, ohne einen Container dafür erstellen zu müssen.

Wenn Sie die minimale Breite definieren, erkennt der IE aus irgendeinem Grund 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/