0

I have an iframe embedded into my page. There is a div inside the iframe which needs to always stay in the center of the screen, even when I scroll.

My page is set up in a way that iframe fits completely, without scrollbars:

main page:

...
<body>
    ...some content
    <iframe src="test.html" width="200px" height="700px">
    </frame>
    ...
</body>
...

test.html:

...
<div class="modal_window">
    <p>Very important message</p>
</div>
...

How can I make my div.modal_window always stay in the center of the screen (if the iframe is visible on the screen, of course)? Preferably using css only

Manfred Radlwimmer
  • 13,257
  • 13
  • 53
  • 62
Oleg
  • 2,984
  • 8
  • 43
  • 71

1 Answers1

0
.modal_window{
   position:fixed;
   margin-left:auto;
   margin-right:auto;
   display:block;
   z-index:100;
}

This code margin-left:auto; margin-right:auto;display:block; will keep your div in center of parent div.

and z-index:100;position:fixed will keep the division on top of parent div and fix position.

Atul Sharma
  • 9,397
  • 10
  • 38
  • 65