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:

enter image description here

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

why not wrap a div for this iframe? – Giberno Dec 03 '11 at 10:13 — Giberno, Dec 03 '11 at 10:13

Alohci · Accepted Answer · 2020-07-08T06:58:27.717

427

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>

edited Jul 08 '20 at 06:58

answered Dec 03 '11 at 10:14

Alohci

70,004
12
103
143

34

Thanks! I should have guessed that an `inline frame` is an inline element :) – Misha Moroshko Dec 03 '11 at 10:17
40

So that's what the "i" stands for. – Aayush Jun 09 '13 at 16:53
13

So, alternately, you can give the container a `text-align: center` rule, correct? – KOVIKO Apr 22 '14 at 20:03
1

yes adding text-align: center to the container would work too – chrisweb Jun 05 '14 at 21:27
11

I found I also had to add `margin: auto;` – MarkyDD Jan 10 '17 at 23:08
`class="d-block mx-auto"` on my `` satisfied (using bootstrap 4.0.0-beta.3) – austin Jan 10 '18 at 02: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 Sep 17 '19 at 14:19

score 57 · Answer 2 · answered Nov 15 '15 at 14:18

57

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.

answered Nov 15 '15 at 14:18

pedro

587
4
2

5

I thought the `align` attribute was deprecated? Why should the OP use this approach instead of using CSS - what's the advantage? – andrewsi Nov 15 '15 at 14:47
5

`style="text-align:center"` isn't deprecated and would do the same job – Anthony Feb 24 '16 at 16:46
3

even though it is depreciated, this works, while everything else does not. – user819490 Mar 07 '17 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! – Renel Chesak Aug 16 '17 at 07: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 – WebDevLearner Feb 24 '21 at 12:38

mgraph · Answer 3 · 2012-08-25T16:06:23.927

20

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;

}

edited Aug 25 '12 at 16:06

answered Dec 03 '11 at 10:20

mgraph

14,736
4
36
72

score 15 · Answer 4 · answered Jul 18 '17 at 15:46

15

The simplest code to align the iframe element:

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

answered Jul 18 '17 at 15:46

Tushar Soni

171
1
4

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. – ankit suthar Jul 18 '17 at 16:07

score 12 · Answer 5 · answered Oct 13 '14 at 18:38

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.

This is to make the video in the iframe responsive, works fine, thank you! — Ricardo, Sep 05 '19 at 21:05

score 6 · Answer 6 · edited Dec 03 '15 at 21:51

6

You can put iframe inside a <div>

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

It works because it is now inside a block element.

edited Dec 03 '15 at 21:51

JGallardo

9,783
7
72
84

answered Dec 03 '11 at 10:18

Sonal Khunt

1,788
11
20

score 5 · Answer 7 · answered Apr 25 '18 at 04:02

5

You can try

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

I hope its useful for you

link

answered Apr 25 '18 at 04:02

Kael

61
1
2

It worked for me, thank you! – XIAOLONG LI Dec 22 '20 at 14:14

score 3 · Answer 8 · answered Sep 25 '14 at 16:18

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;

answered Sep 25 '14 at 16:18

boussac

127
8

2

Only if the parent element has style text-align set to center. – parvus Aug 13 '15 at 18:45

score 3 · Answer 9 · answered May 31 '20 at 08:23

3

In my case solution was on iframe class adding:

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

answered May 31 '20 at 08:23

Nezir

5,971
12
46
72

score 3 · Answer 10 · answered Oct 13 '20 at 10:10

3

My simplest solution to this.

iframe {
    margin:auto;
    display:block;
}

answered Oct 13 '20 at 10:10

aljaz-code

125
9

score 2 · Answer 11 · answered Sep 23 '20 at 18:28

2

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>

answered Sep 23 '20 at 18:28

GorvGoyl

27,835
20
141
143

Manthan Patel · Answer 12 · 2020-05-31T06:32:30.333

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>

How to center an iframe horizontally?

12 Answers12

Linked

Related