欢迎访问 如意编程网！
TAG聚合

如意编程网

当前位置： 首页 > 前端技术 > HTML >内容正文

HTML

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

发布时间：2022/11/16 HTML 16 老码农
如意编程网 收集整理的这篇文章主要介绍了 html-如何让背景宽高100%元素上下左右居中 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

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

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

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

 

 

<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>
        <p>居中元素</p>
    </div>
</body>

 

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

总结

以上是如意编程网为你收集整理的html-如何让背景宽高100%元素上下左右居中的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错，欢迎将如意编程网推荐给好友。