使边距居中的视频元素：0 auto;

Question

我似乎无法将此视频元素集中在此页面中，我一直在搞乱：

HTML

<div id="container">
    <video id="vid" x-webkit-airplay="allow" controls width="640" height="360" src="http://ec2-184-72-239-149.compute-1.amazonaws.com:1935/demos/smil:bigbuckbunnyiphone.smil/playlist.m3u8"></video>
</div>

CSS

#vid {
    margin: 0 auto;
}

您可以在线查看代码here at jsfiddle.为什么我的<video>元素不能居中？

Answer 1

在display: block

中添加#vid

Answer 2

更改为：

#vid {
    margin: 0 auto;
    display: block;
}

可能HTML5规范未完成，因为我确定<video>将是块或内联块

Answer 3

<div id="container">
   <div class="vid"> <video id="vid" x-webkit-airplay="allow" controls width="640" height="360"
       src="http://ec2-184-72-239-149.compute-1.amazonaws.com:1935/demos/smil:bigbuckbunnyiphone.smil/playlist.m3u8"></video></div>
</div>

CSS：

.vid {
    margin: 0 auto;
    width:640px;
}