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 - 使背景圖片上下左右居中對齊