nercon 2020-02-22
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>absoulue与relative配合定位盒子居中问题</title> <style type="text/css"> *{ margin: 0; background-color: yellow; } /* 如何把-一个盒子放到页面中央 */ .box{ width: 100px; height: 100px; background-color: blue; position: absolute; left: 50%; bottom: 50%; margin-top: -50px; margin-left: -50px; z-index: 2; } /*2.如何把2个div块同时居中*/ .div1{ width: 500px; height: 300px; background-color: red; position: absolute; ; left: 50%; top: 50%; /*居中的只是一个点,所以需要往左走250,往上走150*/ margin-left: -250px; margin-top: -150px; } .div2{ width: 200px; height: 100px; background-color:green; position: absolute; top: 50%; left: 50%; margin-left: -100px; margin-top: -50px; } </style> <script> window.onload=function(){ var obj=document.getElementById(‘ceshi‘) obj.onclick=function(){ console.log(‘123‘); alert(‘我一直在寻找找到了你便找到了整个世界‘) } } </script> </head> <body> <div class="box" id="ceshi"></div> <div class="div1"> <div class="div2"> </div> </div> </body> </html>