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

<div class="video">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div>

width: 50%;
margin: 0 auto;

需要注意的重要事项/“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％本身.整齐.