How to align iframe always in the center

2019-02-13 16:50发布

站内问答 / HTML/CSS
1635 6 5

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>

6条回答
做自己的国王
2楼-- · 2019-02-13 17:31

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%;
}
查看更多
0人赞 添加讨论(0) 举报
不美不萌又怎样
3楼-- · 2019-02-13 17:36

center iframe

one solution is:

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

css:

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

fiddle: http://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;
}

fiddle: http://jsfiddle.net/h9gTm/1/

Edit: FLEX solution

using display: flex on the <div>

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

fiddle: http://jsfiddle.net/h9gTm/867/

查看更多
0人赞 添加讨论(0) 举报
再贱就再见
4楼-- · 2019-02-13 17:41

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;
}
查看更多
0人赞 添加讨论(0) 举报
叛逆
5楼-- · 2019-02-13 17:42

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

查看更多
0人赞 添加讨论(0) 举报
叼着烟拽天下
6楼-- · 2019-02-13 17:44

Try this:

#wrapper {
    text-align: center;
}

#wrapper iframe {
    display: inline-block;
}
查看更多
0人赞 添加讨论(0) 举报
手持菜刀，她持情操
7楼-- · 2019-02-13 17:49

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人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)