Flex在Internet Explorer上的工作方式有所不同

Question

I have a div that I use as a 100vh of height to show a video on the page, and to center the content inside this div, I use flex. However, this doesn't work on IE11 (This scares me because it's the latest version). Is there a way I can make it work?

Here's a screenshot at chrome:

Here's a screenshot at IE11:

As you can see, the picture and the slogan go all the way to the top. Here's the CSS that goes with it:

.video-container, .video-container video{
    position: relative;
    min-height: 100vh;
    height: auto;
}
.video-container > video{
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    background: url(../img/creativebg.png);
    background-size: cover;
}
.video-container, .video-whilst{
    display: flex;
    align-content: center;
    align-items: center;
    text-align: center;
    justify-content: center;
    background-color: transparent;
    color: #fff;
    text-shadow: 1px 1px #333;
}

And here's the markup:

 <div class="jumbotron video-container">
            <video autoplay loop muted preload="auto" poster="img/post-video.png">
                <source src="vid/bgvid.mp4" type="video/mp4">
                <source src="vid/bgvid.webm" type="video/webm">
            </video>
            <div>
                <h1 class="title-no-title">SwitchHon</h1>
                <img src="img/brand-switchhon.png">
                <h4 class="h4-switchhon-brand">Ideas a todo mecate</h4>
                <a href="#"><img src="img/down-arrow-circle-md.png" class="center-pic down-arrow pulse-grow"></a>
            </div>
        </div>

Is there a way this can be fixed?

Answer 1

Basicly: this , seems to work.

container : display:flex + height/width

video : position:absolute;

content : align-self:center;