Центрирование видео элемента с полем: 0 авто;

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;
}

Вы можете просмотреть код онлайн здесь, на 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;
}