css弹层效果

做项目时须要做一个弹层，中间遇到了一点小问题，弹出层如何显示在浏览器窗口正中间位置，在这里记录一下。

<!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;
        }

 

posted @ 2018-01-11 14:29  志誠  阅读(230)  评论(0)  编辑  收藏  举报