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>
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.
Also this looks even simpler.
Try this:
#wrapper {
text-align: center;
}
#wrapper iframe {
display: inline-block;
}
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
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/
Edit: FLEX solution
Using display: flex on the <div>
div {
display: flex;
align-items: center;
justify-content: center;
}
JSFiddle: https://jsfiddle.net/h9gTm/867/
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%;
}
Very easy:
you have only to place the iframe between
<center> ... </center>
with some
<br>
. That's all.
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;
}
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;
}
Source: Stackoverflow.com