stick div to the center when scrolling

2018-06-27 02:51:00

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

.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; 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.

链接地址: http://www.djcxy.com/p/75818.html

上一篇: 点击功能bug的WebKit动画

下一篇: 滚动时将div粘贴到中心