10

I have an iframe surrounded by div element and I am simply trying to position it always in the center. here is my jsfiddle effort : jsfiddle

and trully believe that someone could help because I am sure that it is something really simple but I just can not see it.

Here is the HTML itself:

<div id="top-element">Some div that has greater width than the inner div</div>
<div id="iframe-wrapper">
    <iframe src="http://www.apple.com/" scrolling="auto"></iframe>
</div>
Prateek
  • 6,239
  • 2
  • 22
  • 37
mathinvalidnik
  • 1,386
  • 10
  • 32
  • 53

7 Answers7

35

Center iframe

Edit: FLEX solution

Using display: flex on the <div>

div {
    display: flex;
    align-items: center;
    justify-content: center;
}

JSFiddle: https://jsfiddle.net/h9gTm/867/

One solution is:

div {
  text-align:center;
  width:100%;
}
iframe{
  width: 200px;
}
<div>
  <iframe></iframe>
</div>

JSFiddle: https://jsfiddle.net/h9gTm/

edit: vertical align added

css:

div {
    text-align: center;
    width: 100%;
    vertical-align: middle;
    height: 100%;
    display: table-cell;
}
.iframe{
  width: 200px;
}
div,
body,
html {
    height: 100%;
    width: 100%;
}
body{
    display: table;
}

JSFiddle: https://jsfiddle.net/h9gTm/1/

Facundo Colombier
  • 3,111
  • 1
  • 30
  • 37
6

Try this:

#wrapper {
    text-align: center;
}

#wrapper iframe {
    display: inline-block;
}
MarmiK
  • 5,320
  • 6
  • 34
  • 44
Philip
  • 5,950
  • 12
  • 66
  • 99
3

I think if you add margin: auto; to the div below it should work.

div#iframe-wrapper iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    right: 100px;
    height: 100%;
    width: 100%;
}
atw
  • 4,497
  • 8
  • 37
  • 56
1

If all you want to do is display an iframe on a page, the simplest solution I was able to come up with doesn't require divs or flex stuff is:

html {
    width: 100%;
    height: 100%;
    display: table;
}

body {
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

And then the HTML is just:

<html>
  <body>
     <iframe ...></iframe>
  </body>
</html>

If this is all you need you don't need wrapper divs to do it. This works for text content and stuff, too.

Fiddle.

Also this looks even simpler.

Community
  • 1
  • 1
Jason C
  • 34,234
  • 12
  • 103
  • 151
0

You could easily use display:table to vertical-align content and text-align:center to horizontal align your iframe. http://jsfiddle.net/EnmD6/7/ 

html {
    display:table;
    height:100%;
    width:100%;
}
body {
    display:table-cell;
    vertical-align:middle;
}
#top-element {
    position:absolute;
    top:0;
    left:0;
    background:orange;
    width:100%;
}
#iframe-wrapper {
    text-align:center;
}

version with table-row http://jsfiddle.net/EnmD6/9/ 

html {
    height:100%;
    width:100%;
}
body {
    display:table;
    height:100%;
    width:100%;
    margin:0;
}
#top-element {
    display:table-row;
    background:orange;
    width:100%;
}
#iframe-wrapper {
    display:table-cell;
    height:100%;
    vertical-align:middle;
    text-align:center;
}
G-Cyrillus
  • 85,910
  • 13
  • 85
  • 110
  • But when you minimize the window as much as possible, see how the iframe goes beyond the right border of its surrounding div(the orange background on the top) – mathinvalidnik Dec 14 '13 at 12:26
  • add vertical to body padding or vertical- margin to iframe container to keep a safe area . Else, keep using the the display and display top-element and iframe-container as table-row ... this demo is your hint to see how easy things can be done via idsplay:table/table-cell/table-row and so on. – G-Cyrillus Dec 14 '13 at 12:28
  • @GCyrillius Guys, what I am trying to tell you is that the iframe goes beyond the surrounding it div. Just squeeze the result-window and scroll to the right end and see how it goes beyond the right-border of the orange div. – mathinvalidnik Dec 14 '13 at 12:44
  • oups, sorry, i didnot update the jsfiddle, see http://jsfiddle.net/EnmD6/9/ and mistook what you meant, just expecting the defaut of absolute position being shown :) – G-Cyrillus Dec 14 '13 at 12:50
  • @GCyrillius Now it looks pretty well but i don't know if you noticed that in my example on vertical resize a window scroll was not showing but only the iframe scroll was changing. Check that: http://jsfiddle.net/EnmD6/ – mathinvalidnik Dec 14 '13 at 12:57
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/43176/discussion-between-mathinvalidnik-and-gcyrillus) – mathinvalidnik Dec 14 '13 at 13:02
0

First remove position:absolute of div#iframe-wrapper iframe, Remove position:fixed and all other css from div#iframe-wrapper

Then apply this css,

div#iframe-wrapper {
  width: 200px;
  height: 400px;
  margin: 0 auto;
}

FIDDLE DEMO

Prasanth K C
  • 6,307
  • 5
  • 33
  • 58
-1

Very easy:

  1. you have only to place the iframe between

     <center> ...  </center>

  2. with some

     <br>

. That's all.

Daniel K
  • 1
  • 2