做项目时须要做一个弹层，中间遇到了一点小问题，弹出层如何显示在浏览器窗口正中间位置，在这里记录一下。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> * { margin: 0; padding: 0; } body { width: 100%; height: 100%; } .opacity_ { width: 100%; height: 100%; background: gray; opacity: 0.5; filter: Alpha(opacity=50); position: fixed; } .login { width: 300px; height: 200px; background: blue; position: fixed; /*login div居中显式方法*/ margin: auto; top: 0; bottom: 0; left: 0; right: 0; } </style> </head> <body> <div class="opacity_"></div> <div class="login"></div> </body> </html>
第二种居中方法：
.login { width:300px; height:200px; background:blue; position:fixed; /*login div居中显式方法*/ left:50%; top:50%; /*login div宽度的一半*/ margin-left:-150px; /*login div高度的一半*/ margin-top:-100px; }