how do I center javascript css popup div, no matter what the screen resolution?

后端 未结 7 1321
一生所求
一生所求 2021-02-07 08:14

I have the following code that opens a new popup window while disabling the background, the problem is that I have to position this so that it\'s 100px from the top (already got

7条回答
  •  一向
    一向 (楼主)
    2021-02-07 08:59

    CSS based solution to center:

    You need to use these styles to make it appear dead-center:

    position:absolute;
    top:50%;
    left:50%;
    width:400px;  /* adjust as per your needs */
    height:400px;   /* adjust as per your needs */
    margin-left:-200px;   /* negative half of width above */
    margin-top:-200px;   /* negative half of height above */
    

    So position should be specified. The top and left should be 50%. The margin-left and margin-top should be negative one half of the width and height of the box respectively.

    Notice that if you want your popup to appear on center even when page is scrolled you will have to use position:fixed instead with the draw back that it doesn't work in IE6.

提交回复
热议问题