让div相对于浏览器窗口居中。
方案一：纯粹使用CSS实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试文件</title> <style> #test { /*准备一个长200px 宽200px的div，背景设置成黄色*/ width: 200px; height: 200px; background-color: #FC0; /*下面是核心代码*/ margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } </style> </head> <body> <div id="test"> </div> </body> </html>
上面这套方案是比较完美的方案，即便缩放浏览器窗口也能保证div居中。
方案二：利用Javascript实现
<!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浏览器支持，而且，我用了下，没效果。