How do I center my iframe?

Question

I am making a page where my Twitch stream is gonna go, but I am having trouble centering it horizontally. Whenever I look it up, the answer is:

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

But this just doesn't work for me. The iframe just appears to be floating on top of everything, off-centered. It is supposed to stretch out the black bar, which is the mainArea, pushing down the footer, which is the gray bar under it. Instead it ignores everything, leaving the page to snap back like a rubber band.

Here's the link to the screen cap, because SO won't let me post an image directly...

https://i.sstatic.net/IGw21.jpg

This is the HTML, which is the is one 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, the container class CSS:

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

and the page class CSS:

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

}

Thanks in advance, Jack

Answer 1

Give margin: auto to <iframe>:

iframe {margin: auto;}

Or just give display: inline-block; to it:

iframe {display: inline-block;}

Answer 2

iframe is block element, so use

iframe {margin: auto}