How to center an iframe horizontally?

Question

Consider the following example: (live demo)

HTML:

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

CSS:

div, iframe {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;
}

Result:

Why the iframe is not centrally aligned like the div? How could I centrally align it?

Unsuspected

why not wrap a div for this iframe? – Grandstand

Answer 1

Add display:block; to your iframe css.

div, iframe {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;
}

iframe {
    display: block;
    border-style:none;
}

<div>div</div>
<iframe src="data:,iframe"></iframe>

Marnie

So, alternately, you can give the container a text-align: center rule, correct? – Identity

yes adding text-align: center to the container would work too – Anyplace

I found I also had to add margin: auto; – Telic

class="d-block mx-auto" on my <iframe> satisfied (using bootstrap 4.0.0-beta.3) – Cryolite

I had a similar experience, needed this to get an iframe macro in Confluence to center properly: style="border:1;display:block;margin:auto" – Tenfold

Answer 2

best way and more simple to center an iframe on your webpage is :

<p align="center"><iframe src="http://www.google.com/" width=500 height="500"></iframe></p>

where width and height will be the size of your iframe in your html page.

Plainsman

I thought the align attribute was deprecated? Why should the OP use this approach instead of using CSS - what's the advantage? – Whirlybird

style="text-align:center" isn't deprecated and would do the same job – Lashondalashonde

even though it is depreciated, this works, while everything else does not. – Parian

This works in the HTML file and thus is easier for newbs like me to impliment. I just did it in 2017 so it must not be depreciated. Thanks for the tip! – Scabbard

the align attribute has been removed in HTML5(although it works -though not on strict-HTML5 platforms like Wordpress or Github) and text-align does not work on iframes – Millicentmillie

Answer 3

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;

}

Barnum

Answer 4

The simplest code to align the iframe element:

<div align="center"><iframe width="560" height="315" src="www.youtube.com" frameborder="1px"></iframe></div>

Radiator

Please see this first how-to-answer This question is answered before, obviously, you can add your answer here. But You Need to understand some points before answering. First, don't add an answer which is previously added with the same code or suggestion. Second, don't add an overly complicated answer if the user has asked very specifically about the problem and what he needs to solve this. Third, You can add a comment if you want to suggest anything regarding the answer or question. – Caroylncarp

Thanks, this works for me, while the more upvoted answers don't for me. @Caroylncarp you are adding unnecessary noise, please stop. – Electrojet

Answer 5

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.

Tomfoolery

Answer 6

My simplest solution to this.

iframe {
    margin:auto;
    display:block;
}

Darendaresay

Answer 7

You can put iframe inside a <div>

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

It works because it is now inside a block element.

Zeiger

Answer 8

You can try

<h3 style="text-align:center;"><iframe src=""></iframe></h3>

I hope its useful for you

link

Engels

Answer 9

If you can't access the iFrame class then add below css to wrapper div.

<div style="display: flex; justify-content: center;">
    <iframe></iframe>
</div>

Solitta

Answer 10

In my case solution was on iframe class adding:

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

Armijo

Answer 11

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;

Cabana

Only if the parent element has style text-align set to center. – Molech

Answer 12

<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FRishabh-Cars-Jodhpur-110479104559774&tabs=timeline&width=500&height=1200&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="500" height="1200" style="border:none;overflow:hidden;display:block;margin:0 auto;" scrolling="yes" frameborder=".6" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>

use it and embed facebook in iframe in center of html page

Lanalanae

Thank you for sharing. The most important piece of information in your answer is to replace the default facebook page plugin style with your variation: style="border:none;overflow:hidden;display:block;margin:0 auto;" – Grettagreuze

Answer 13

Here I have put snippet for all of you who are suffering to make iframe or image in center of the screen horizontally. Give me THUMBS UP VOTE if you like.👍⯅.

style > img & iframe > this is your tag name so change that if you're want any other tag in center

<html >
 <head> 
            <style type=text/css>
            div{}
            img{
                 margin: 0 auto;
	         display:block;
         	}
	 iframe{	
		margin: 0 auto;
		display:block;
		}
				
            </style>
</head>
 <body >
           
			<iframe src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" width="320" height="180" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 
			
			<img src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg" width="320" height="180"  />
            </body> 
            </html>

Demetri

Answer 14

I used

iframe {
    align-items: center;
    margin: auto;
}

to put the iframe div in the center, as well as to center the items inside the iframe.

Inveteracy