html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden
}

.outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px; /*whatever width you want*/
}

@media screen and (orientation:portrait) {
  #iframe {
    width: 100%;
  }
}
@media screen and (orientation:landscape) {
  #iframe {
    width: 100%;
  }
}