Flexbox wird im IE nicht vertikal zentriert

115

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%;
}
Dragonseer
quelle
Ich habe momentan keinen Zugriff auf IE11. Haben Sie diese Lösung ausprobiert : stackoverflow.com/questions/16122341/… ?
Cimmanon
margin: auto scheint keinen Unterschied gemacht zu haben.
Dragonseer
Bitte melden Sie Fehler Microsoft mindestens sie werden einen Fehler weniger in der offiziellen Veröffentlichung haben, wie immer IE wird etwas (viele einzigartige Fehler) zu behandeln haben ..
MarmiK
Sie müssen -ms-flexboxfür IE verwenden ..
Avrahamcool
IE11 verwendet den aktuellen Flexbox-Anzeigestandard: flex. msdn.microsoft.com/en-us/library/ie/dn265027(v=vs.85).aspx . Ich habe es trotzdem versucht und es machte keinen Unterschied; Der Inhalt ist immer noch oben ausgerichtet. Beachten Sie auch meine Bearbeitung in der ursprünglichen Frage, die besagt, dass das äußere Div korrekt zentriert ist, wenn es im Vollbildmodus angezeigt wird, aber oben ausgerichtet ist, wenn es nicht im Vollbildmodus angezeigt wird.
Dragonseer

Antworten:

224

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.

Kaloyan Stamatov
quelle
9
Vergessen Sie nicht -ms-flex-align:center;für IE10. Unterstützung für align-itemswurde nur in IE11 hinzugefügt .
Boaz
Ah! so viele Monate später rettete mich das - das Einstellen einer Höhe anstelle einer minimalen Höhe funktionierte.
Pete
@KaloyanStamatov Schauen Sie sich Autoprefixer an und helfen Sie, sich von diesen lästigen Cross-Browser-Problemen zu befreien.
Hitautodestruct
29
Diese Lösung funktioniert nicht, wenn der Inhalt größer als die Mindesthöhe ist. Das min-heightüberschreibt zwar die heightRegel, aber wenn der Inhalt den überschreitet, erstreckt min-heighter sich einfach über die Grenzen hinaus. Die Antwort von @ericodes löst dieses Problem und die Lösung funktioniert auf allen Browsern, die Flex unterstützen.
lachie_h
2
Für alle, die in oder nach 2019 hierher kommen, ist die mit Abstand beste Lösung die von @ sergey-fedirko, die keine zusätzlichen HTML-Elemente und keine harten Höhen benötigt;) Diese: stackoverflow.com/a/54796082/134120
AsGoodAsItGets
70

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/

ericodes
quelle
1
Sie sollten den Code, mit dem Sie das Problem behoben haben, in Ihrer eigentlichen Antwort veröffentlichen, anstatt auf eine externe URL zu verlinken. Dann wird Ihre Antwort auch nach dem Erlöschen des Links weiterhin hilfreich sein.
Kelly Keller-Heikkila
11
Dies ist bei weitem die beste Lösung für diesen Fehler. Alle anderen Antworten schlagen eine feste Höhe des Containers vor, die nicht funktioniert, wenn der Inhalt eine variable Höhe hat. Diese Lösung ermöglicht die Verwendung von min-heightanstelle einer harten heightRegel, während sie sich weiterhin vertikal auf alle Browser konzentriert, die die Verwendung von unterstützen display: flex.
Lachie_h
1
Nur display:flexwird auf dem Wrapper benötigt, und möglicherweise eines davon auf dem Kind: width: 100% flex-basis:100% flex-grow:1abhängig von Ihrem Inhalt / Stil.
fregante
Diese Problemumgehung funktioniert nicht, wenn die FlexContainerWrapper-Eigenschaft festgelegt align-itemsist. Sie müssen die ursprüngliche Flexbox mit einer Flexbox ohne diese Eigenschaft umschließen.
Marcus Krahl
hey @MarcusKrahl! Wollen Sie damit sagen, dass Sie die ursprüngliche Flexbox (FlexContainer) mit einer Flexbox ohne align-itemsEigenschaft (FlexContainerWrapper) umwickeln?
Ericodes
10

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;
  }
}
Sergey Fedirko
quelle
6

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

Gal Talmor
quelle
5

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

David Zulaica
quelle
43
Es wurde jedoch anscheinend nicht extern behoben.
Blazemonger
4
"Dieses Problem scheint in Microsoft Edge behoben worden zu sein. Wir arbeiten derzeit nicht an Funktionsfehlern in Internet Explorer außerhalb von Sicherheitsproblemen." Sie haben das Problem für Versionen von IE Pre-Edge
David Zulaica
1
Die Lösung scheint darin zu bestehen, die Höhe anstelle der Mindesthöhe zu verwenden, wenn Sie können.
frodo2975
3

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;
    }
Umar Khan
quelle
Vielen Dank für Ihre Eingabe. Leider scheinen Ihre Fiddles in Chrome oder IE11 nicht zu funktionieren. Das Zentrierungsbeispiel wird nicht mehr in Chrome zentriert, und das Zentrierungs- und Bildlaufbeispiel wird nicht in IE11 zentriert und schneidet weiterhin Inhalte ab.
Dragonseer
1

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/

Todd
quelle
Danke für deine Antwort. Die Höhen- und Breitendeklaration ist erforderlich, um im IE vertikal zu zentrieren. Ohne sie ist der Inhalt nicht mehr in IE11 zentriert.
Dragonseer
Auch wenn die Höhe am äußeren Teil eingestellt ist? Vielleicht dem Körper eine minimale Höhe hinzufügen?
Todd
1

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;
}  
Avirtum
quelle
0

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/

Humberto Mendes
quelle