How to align iframe always in the center

user_2459562 0
Viewed 157095

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>
alignment iframe css html
7 Answers

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>
user_169907020
Related