css弹层效果

最新推荐文章于 2022-01-05 20:39:24 发布

ayfxo22204

最新推荐文章于 2022-01-05 20:39:24 发布

阅读量99

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/pfcan66/p/8268243.html

版权

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

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

转载于:https://www.cnblogs.com/pfcan66/p/8268243.html

ayfxo22204

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css弹层效果

做项目时须要做一个弹层，中间遇到了一点小问题，弹出层如何显示在浏览器窗口正中间位置，在这里记录一下。<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/...
复制链接

扫一扫