垂直對齊已經水平居中的div

Question

我試圖垂直地包含使用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

試試這個小提琴

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

video {
  border: 1px solid black;
}

Answer 2

添加到您的課程：

.container {
    height: 100%;
}
#content {
    height: 100%;
}

Answer 3

你可以做這樣的事情。 如果頁面太小並不是很好，所以您可能希望在其中進行一些媒體查詢。

 .container { padding-right: 15px; padding-left: 15px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #content .content-wrapper { display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; flex-direction: column; } 

 <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="cr-top"> blah blah </div> <div class="cr-rest"> blah blah </div> </div> </div> </div> 

Answer 4

您可以給#content設置一個高度，並使其與align-items:center一起display:flex

例

碼：

#content {
    width: 100%;
    height: 1000px;
    display: flex;
    align-items: center;

}

Answer 5

根據W3：來源： http : //www.w3.org/Style/Examples/007/center.en.html在頁面的大約一半處，他們建議使用

display:flex;
align-items: center;
justify-content: center;

在父容器上。