html - How do I center my iframe? -

i making page twitch stream gonna go, having trouble centering horizontally. whenever up, answer is:

<div style="text-align:center"> <iframe></iframe> </div> 

but doesn't work me. iframe appears floating on top of everything, off-centered. supposed stretch out black bar, mainarea, pushing down footer, gray bar under it. instead ignores everything, leaving page snap rubber band.

here's link screen cap, because won't let me post image directly...

http://imgur.com/yx2oc46

this html, is 1 step under body in hierarchy:

<div id="mainarea">             <div class="container page">                 <div style="text-align: center">                     <iframe id="player" src="http://www.twitch.tv/twitchusername/embed" frameborder="0" scrolling="no" height="480" width="853"></iframe>                 </div>             </div>         </div> 

just in case, container class css:

    .container{     background-color: #111111;     width: 1200px;     height: auto;     margin: 0 auto; } 

and page class css:

    .page{     background-color: #111111;     padding: 20px;     padding-bottom: 1px;     color:white;  } 

thanks in advance, jack

iframe block element, use

iframe {margin: auto}