318

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:

enter image description here

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

1
  • 7
    why not wrap a div for this iframe?
    – Giberno
    Commented Dec 3, 2011 at 10:13

14 Answers 14

492

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>

5
  • 16
    So, alternately, you can give the container a text-align: center rule, correct?
    – KOVIKO
    Commented Apr 22, 2014 at 20:03
  • 1
    yes adding text-align: center to the container would work too
    – chrisweb
    Commented Jun 5, 2014 at 21:27
  • 18
    I found I also had to add margin: auto;
    – MarkyDD
    Commented Jan 10, 2017 at 23:08
  • class="d-block mx-auto" on my <iframe> satisfied (using bootstrap 4.0.0-beta.3)
    – austin
    Commented Jan 10, 2018 at 2:08
  • I had a similar experience, needed this to get an iframe macro in Confluence to center properly: style="border:1;display:block;margin:auto"
    – slm
    Commented Sep 17, 2019 at 14:19
82

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.

5
  • 5
    I thought the align attribute was deprecated? Why should the OP use this approach instead of using CSS - what's the advantage?
    – andrewsi
    Commented Nov 15, 2015 at 14:47
  • 7
    style="text-align:center" isn't deprecated and would do the same job
    – Ant
    Commented Feb 24, 2016 at 16:46
  • 4
    even though it is depreciated, this works, while everything else does not.
    – user819490
    Commented Mar 7, 2017 at 17:48
  • 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! Commented Aug 16, 2017 at 7:59
  • 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 Commented Feb 24, 2021 at 12:38
22

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;

}
0
19

The simplest code to align the iframe element:

<div align="center"><iframe width="560" height="315" src="www.youtube.com" frameborder="1px"></iframe></div>
2
  • 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. Commented Jul 18, 2017 at 16:07
  • Thanks, this works for me, while the more upvoted answers don't for me. @always-a-learner you are adding unnecessary noise, please stop.
    – Jyaif
    Commented Apr 8 at 21:36
14

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.

0
14

My simplest solution to this.

iframe {
    margin:auto;
    display:block;
}
6

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>
0
5

You can put iframe inside a <div>

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

It works because it is now inside a block element.

0
5

You can try

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

I hope its useful for you

link

0
4

In my case solution was on iframe class adding:

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

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;
1
  • 2
    Only if the parent element has style text-align set to center.
    – parvus
    Commented Aug 13, 2015 at 18:45
2

<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

1
  • 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;" Commented Jan 30 at 9:21
0

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>

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.