How to align iframe always in the center

Question

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 tr

Answer 1

center iframe

one solution is:

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 {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

0 讨论(0)

查看其它6个回答

发布评论:

提交评论

---

•  加载中...