How to center an iframe horizontally?

Question

Consider the following example: (live demo)

HTML:

div

CSS:

div         


        

Answer 1

My simplest solution to this.

iframe {
    margin:auto;
    display:block;
}

Answer 2

You can put iframe inside a <div>

<div>
    <iframe></iframe>
</div>

It works because it is now inside a block element.

Answer 3

If you are putting a video in the iframe and you want your layout to be fluid, you should look at this webpage: Fluid Width Video

Depending on the video source and if you want to have old videos become responsive your tactics will need to change.

If this is your first video, here is a simple solution:

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

And add this css:

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Disclaimer: none of this is my code, but I've tested it and was happy with the results.

Answer 4

According to http://www.w3schools.com/css/css_align.asp, setting the left and right margins to auto specifies that they should split the available margin equally. The result is a centered element:

margin-left: auto;margin-right: auto;

Answer 5

HTML:

<div id="all">
    <div class="sub">div</div>
    <iframe>ss</iframe>
</div>

CSS:

#all{
    width:100%;
    float:left;
    text-align:center;
}
div.sub, iframe {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;

}

Answer 6

In my case solution was on iframe class adding:

    display: block;
    margin-right: auto;
    margin-left: auto;