Search code examples
htmliframepositioningabsoluteclipping

centre iframe absolute position in html page

I have an iframe which I have clipped at the top, but want to centre on the webpage and zoom on load. I can clip it, but cannot position it, even with a relative div container, so as to maintain the clipped area at the top.

JSFiddle 

<div id="content">
<div id="myiframe">
  <iframe src="http://www.flippity.net/fc.asp?k=15r4rRJ- 
   hrZW2kAjUhpv1ZcqsWaUFci7O9e2ItxBDfO0"  height=700px  width=800px  
 scrolling="no"></iframe>
</div>
</div>
Solution

  • Try this

    #content {
    width:100%;
    position:absolute;
    display:block;
    top:0;
}
#content #myiframe {
    margin:auto;
    position: relative;
    width:800px;
}