Vertikale Ausrichtung mit Flexbox in IE11 und IE10

Question

Wie wird eine Cross-Browser-Lösung erstellt, bei der ein Element vertikal ausgerichtet ist?

http://jsfiddle.net/e2yuqtdt/3/

Dies funktioniert sowohl in Firefox und Chrome, aber nicht in IE11

<div class="page_login"> 
    <div>vertical-align:center; text-align:center</div> 
</div> 

html, body { 
    height:100%; 
} 

.page_login { 
    display:flex; 
    height:100%; 
    width:100%; 
    background:#303030; 
} 

.page_login > div { 
    margin:auto; 
    background:#fff; 
    min-height:100px; 
    width:200px; 
} 

Update

Wenn das zentrierte Elemente höher ist als die Darstellungshöhe ist der Hintergrund nur 100% und nicht 100% Spiralhöhe

http://jsfiddle.net/e2yuqtdt/8/

html, body { 
    min-height:100%; 
    height:100%; 
} 

.page_login { 
    display:flex; 
    min-height:100%; 
    height:100%; 
    width:100%; 
    background:#303030; 
} 

.page_login > div { 
    margin:auto; 
    background:#fff; 
    height:800px; 
    width:200px; 
} 

Answer 1

Wie wird eine Cross-Browser-Lösung erstellt, bei der ein Element vertikal ausgerichtet ist? ?

Werfen Sie einen Blick auf diese Geige: http://jsfiddle.net/5ry8vqkL/

Die Technik angewendet ist die Verwendung von "display: table". Hier ist ein Artikel für eine eingehende Ansicht des Ansatzes http://css-tricks.com/centering-in-the-unknown/

Unterstützte Browser hier zu sehen ist: http://caniuse.com/#search=table-cell

HTML:

<div class="container"> 
    <div id="page-login"> 
     <div class="panel">Some content</div> 
    </div> 
</div> 

CSS:

html, body { 
    min-height:100%; 
    height:100%; 
} 

.container { 
    display: table; 
    height:100%; 
    width:100%; 
    background:#303030; 
} 

#page-login { 
    display: table-cell; 
    vertical-align: middle 
} 

.panel { 
    height: 100px; 
    background-color: #fff; 
} 

Answer 2

Sie müssen dem Div eine Höhe hinzufügen. Da Sie nur eine Mindesthöhe angegeben haben, wird sie vom IE automatisch auf das maximal mögliche Maß erweitert. So eine Höhe hinzufügen, wie folgt aus:

.page_login > div { 
    margin:auto; 
    background:#fff; 
    min-height:100px; 
    width:200px; 
    height:200px; 
} 

http://jsfiddle.net/e2yuqtdt/6/

Da dies ein Flex-Box ist, und daher zu biegen, bedeutete, eine gute Idee, die Höhe ein Prozentsatz zu machen sein könnte. Also würde die div-Höhe beispielsweise 50% der Seitenhöhe betragen, es sei denn, die Seite wäre weniger als 200px hoch - dann wäre sie 100px hoch.

Update: Leider ist es nicht möglich, das div füllen die ganze Seite mit nur CSS. Doch es scheint, ist es möglich, mit Javascript finden Sie hier Make a div fill the height of the remaining screen space

Eigentlich - achived haben es mit Tabellen divs

http://jsfiddle.net/e2yuqtdt/14/

<div> 
    <div id="div1"> 
     <div id="div2">vertical-align:center; text-align:center</div> 
    </div> 
</div> 


#div1 { 
    display:flex; 
    height:100%; 
    width:100%; 
    background:#303030; 
} 

#div2 { 
    margin:auto; 
    background:#fff; 
    height:800px; 
    width:200px; 
} 

Ich weiß, dass dieses Update kommt nach dem von Elad .chen - aber hatte das schon getan und es in den Kommentar unten gepostet - einfach nicht dazu gekommen, die Frage zu aktualisieren.