html - 垂直对齐已经水平居中的 div

Question

我尝试使用 this 垂直放置一个包含 3 个 div 的 div作为引用。但是，我无法使用 disply: flex 和引用中提到的其他内容来实现它。问题是带有 id="content" 的整个 div 只能水平居中而不是垂直居中。我也希望将其垂直居中。我该如何进行？

这是一个JSFIDDLE在上面。

这是我到目前为止尝试过的方法。

HTML

<div id="content">
<div class="container">
    <div class="content-wrapper">
        <div class="c-left">
            <video width="400">
              <source src="https://d31vcf9x8qnwak.cloudfront.net/videos/encoded/DuLzrFlrH.mp4" type="video/mp4">
              Your browser does not support HTML5 video.
            </video>
        </div>
        <div class="c-r-top">
            blah blah
        </div>
        <div class="c-r-rest">
            blah blah
        </div>
    </div>
</div>

CSS

.container{
width: 1170px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
overflow: auto;
}
#content{
width: 100%;
}
#content .content-wrapper{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
flex-direction: column;
justify-content: center;
}

Answer 1

试试这个<强> Fiddle

.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
}

video {
  border: 1px solid black;
}