html-如何让背景宽高100%元素上下左右居中

本文转载自查看原文 2020-07-04 11:04 524 web前端

在一些登陆，注册页面中经常会出现这种布局模式，背景图片或者背景颜色宽度，高度100%铺开；

中间添加div上下左右居中，今天就带着大家做这样一个效果

<style>
        body,p,h1{
            padding: 0;
            margin: 0;
        }
        html,body{
            height: 100%;
            width: 100%;
        }
        html{
            height: 100%;
            width: 100%;
        }
        .div1{
            width: 100%;
            height: 100%;
            background-color: teal;
        }
        .div2{
            position: fixed;
            width: 300px;
            height: 400px;
            margin: auto;
            background-color: tomato;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
<body>
    <div class="div1">
        <p class="div2">居中元素</p>
    </div>
</body>

其中position: fixed;是必须要加的，但是用absolute和relative也是可以的，但是一般情况下，添加的窗口是固定在屏幕的正中间，所以一般使用fixed

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 flex 方法上下左右居中子元素无宽高未知宽高元素如何在一个div中上下左右居中对齐 html----实现元素上下左右居中如何实现不确定宽高的盒子上下左右居中 Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中 CSS 控制元素上下左右居中 div在父元素内上下左右居中使一个div元素上下左右居中元素上下左右居中的几种方法 CSS - 使背景图片上下左右居中对齐