我试图在我的引导页面中将YouTube嵌入式视频与页面中心对齐.视频的大小始终相同.
我的HTML看起来很简单：
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div>
我尝试了stackoverflow的不同解决方案(它只针对div而不是视频),而我能想到的最好的解决方案是this fiddle.
我已经尝试了solution1,solution2,solution3但没有结果.另一个部分成功的解决方案是使用：
width: 50%; margin: 0 auto;
它在桌面上运行良好,但在iPad或手机上失败(视频部分在屏幕之外).如何在桌面/平板电脑/手机中正确对中视频？
解决方法
需要注意的重要事项/“Bootstrap”只是一堆CSS规则
HTML
<div class="your-centered-div">
<img src="http://placehold.it/1120x630&text=Pretend Video 560x315" alt="" />
</div>
CSS
/* key stuff */
.your-centered-div {
width: 560px; /* you have to have a size or this method doesn't work */
height: 315px; /* think about making these max-width instead - might give you some more responsiveness */
position: absolute; /* positions out of the flow,but according to the nearest parent */
top: 0; right: 0; /* confuse it i guess */
bottom: 0; left: 0;
margin: auto; /* make em equal */
}
完全工作jsFiddle is here.
编辑
这些天我大多使用这个：
直接的CSS
.centered-thing {
position: absolute;
margin: auto;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
如果你使用手写笔/ mixins(你应该…它是最好的)
center-center()
absolute()
margin auto
top 50%
left 50%
transform translate(-50%,-50%)
这样……你不需要知道元素的大小 – 而翻译是基于它的大小 – 所以,-50％本身.整齐.
