Video-Element in Flexbox (CSS) nicht in IE zentriert nur

Question

Meine Demo: https://jsfiddle.net/tk14jbry/

Ergebnis wie in Chrome/Safari/MS Rande erwartet (ja!):

Ich gehe davon aus dem Problem ist mein Struktur:

<div class="flexbox"> 
    <video width="320" height="240">... 
    </video> 
</div> 

Wie kann ich IE 11 (kümmere mich nicht darum) arbeiten lassen?

(Ich will nicht ein weiteres Element zwischen .flexbox und Video hinzufügen) in Ihrem CSS position: relative;

Sie haben die folgenden in einem Flex-Container

Answer 1

ändern position: absolute; auf Ihrem Video-Elemente. Die absolute Positionierung dieses Elements verhindert, dass die Ausrichtungseigenschaften des Containers ordnungsgemäß funktionieren.

#Kurzfilm video { 
    margin: 0 auto; 
    display: inline-block; 
    position: absolute; 
} 

Wechseln zu:

#Kurzfilm video { 
    position: relative; 
} 

margin: 0 auto; ist nicht notwendig, es zu zentrieren, da Sie die Ausrichtungseigenschaften auf dem Behälter festgelegt haben. display: inline-block; ist ebenfalls nicht notwendig.

Es folgt ein Bildschirm-Schnappschuss von IE 11 unter Windows 10 in Browserstack ausgeführt wird: