[英]Vertically align a div that is already horizontally centered
I tried to vertically a div that contains a 3 divs using this as a reference. 我试图垂直地包含使用3周的div一个div 此作为参考。 However, I was not able to achieve it using
disply: flex
and other things mentioned in the reference. 但是,我无法使用
disply: flex
和参考中提到的其他方式来实现它。 The problem is the entire div with id="content"
gets only horizontally centered and not vertically centered. 问题是
id="content"
的整个div仅在水平居中,而在垂直居中。 I am looking to center it vertically as well. 我也希望将其垂直居中。 How shall I proceed?
我应该如何进行?
Here is a JSFIDDLE on it. 这是一个JSFIDDLE 。
Here is what I've tried so far. 到目前为止,这是我尝试过的。
HTML 的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 的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;
}
Add to your classes: 添加到您的课程:
.container {
height: 100%;
}
#content {
height: 100%;
}
You could do something like this. 你可以做这样的事情。 It's not pretty if the page is too small though so you might want some media queries in there.
如果页面太小并不是很好,所以您可能希望在其中进行一些媒体查询。
.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>
According to W3: Source: http://www.w3.org/Style/Examples/007/center.en.html About half-way down the page, they suggest using 根据W3:来源: http : //www.w3.org/Style/Examples/007/center.en.html在页面的大约一半处,他们建议使用
display:flex;
align-items: center;
justify-content: center;
on a parent container. 在父容器上。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.