css – 如何在引导程序中将YouTube嵌入式视频与中心对齐

我试图在我的引导页面中将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规则

a fiddle

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％本身.整齐.