html-如何讓背景寬高100%元素上下左右居中
阿新 • • 發佈：2020-07-04
在一些登陸，註冊頁面中經常會出現這種佈局模式，背景圖片或者背景顏色寬度，高度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