13

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>

8 Answers 8

40

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%;
}
div > 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;
}
div > iframe{
  width: 200px;
}
div,
body,
html {
    height: 100%;
    width: 100%;
}
body{
    display: table;
}

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

5
  • just edited changing the margin auto, since it's not working with iframes, instead use text-align for it Dec 14, 2013 at 12:24
  • 3
    margin:auto works on iframe if you display it as block :) iframe {display:block;margin:auto;} jsfiddle.net/EnmD6/5
    – G-Cyrillus
    Dec 14, 2013 at 12:41
  • Just to really ensure its entered also add: border:0; margin:0; to your body CSS
    – dijipiji
    Jul 27, 2015 at 12:33
  • 1
    Using this, I cannot resize iframe whatsoever. How to achieve that?
    – biozalp
    Jan 28, 2022 at 10:54
  • there was an error in the iframe css and just fixed it, thanks @biozalp Feb 1, 2022 at 13:55
6

Try this:

#wrapper {
    text-align: center;
}

#wrapper iframe {
    display: inline-block;
}
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%;
}
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.

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;
}
6
  • 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) Dec 14, 2013 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, 2013 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. Dec 14, 2013 at 12:44
  • oups, sorry, i didnot update the jsfiddle, see jsfiddle.net/EnmD6/9 and mistook what you meant, just expecting the defaut of absolute position being shown :)
    – G-Cyrillus
    Dec 14, 2013 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: jsfiddle.net/EnmD6 Dec 14, 2013 at 12:57
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

4
  • This just totally doesn't work because it doesn't scroll the iframe itself Dec 14, 2013 at 13:37
  • @mathinvalidnik you want to scroll iframe when page is scrolled?? Dec 14, 2013 at 16:03
  • Yes. Otherwise it is fixed on the window. Plus, it would be nice if the vertical scroll on the window was not showing. Dec 14, 2013 at 16:41
  • @mathinvalidnik check my updated answer. check updated fiddle Dec 14, 2013 at 16:57
0

You could use CSS and add a container and a style to centre it

<style>
.container { 
  height: 75px;
  position: relative;
  border: none;
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>

After you paste this add a div to the iFrame and then it should look like this

<div class="container">
  <div class="center">
    <iframe src="embbeded form link here" width="600" height="300" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
  </div>
</div>
0

very simple HTML only way: no css no scripts

<center>
<iframe> your content </iframe>
</center>

example 2 frame center and text in the frame left or right e.c.t

<center>
<iframe align="left|right|middle|top|bottom"> your frame content </iframe>
</center>

to see all iframe parameters you can use a iframe generator https://superblogger3.blogspot.com/2023/03/iframe-generator.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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