标签:
让div相对于浏览器窗口居中。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试文件</title> <style> #test { width:200px; height:200px; background-color:#FC0; position:fixed; } </style> <script> window.onload = function(){ var screen_width = window.screen.availWidth; //获取屏幕宽度 var screen_height = window.screen.availHeight; //获取屏幕高度 var X = (screen_width - 200)/2; var Y = (screen_height - 200)/2; var div = document.getElementById("test"); div.style.left=X + "px"; div.style.top=Y + "px"; }; </script> </head> <body> <div id="test"></div> </body> </html>
几个关键点说明下:
position:fixed 决定div是相对于浏览器窗口居中,而不是相对于一般意义上的父窗口居中。
必须使用window.onload保证在DOM加载完毕后才执行js,<script>标签的defer属性理论上也能实现此效果,但defer属性只有IE浏览器支持,而且,我用了下,没效果。
标签:
原文地址:http://www.cnblogs.com/dige1993/p/4605612.html