如何通过absoulue与relative配合把一个盒子或者是把2个div块同时放到页面中央部分？定位完成后为什么又需要margin-left与margin-top各往回走50%的长度，别忘记用z-index定位高度，请看下面代码展示:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>absoulue与relative配合定位盒子居中问题</title>
7 <style type="text/css">
8 *{
9 margin: 0;
10 background-color: yellow;
11 }
12 /* 如何把-一个盒子放到页面中央 */
13 .box{
14 width: 100px;
15 height: 100px;
16 background-color: blue;
17 position: absolute;
18 left: 50%;
19 bottom: 50%;
20 margin-top: -50px;
21 margin-left: -50px;
22 z-index: 2;
23 }
24 /*2.如何把2个div块同时居中*/
25 .div1{
26 width: 500px;
27 height: 300px;
28 background-color: red;
29 position: absolute; ;
30 left: 50%;
31 top: 50%;
32 /*居中的只是一个点，所以需要往左走250，往上走150*/
33 margin-left: -250px;
34 margin-top: -150px;
35 }
36 .div2{
37 width: 200px;
38 height: 100px;
39 background-color:green;
40 position: absolute;
41 top: 50%;
42 left: 50%;
43 margin-left: -100px;
44 margin-top: -50px;
45 }
46 </style>
47 <script>
48 window.onload=function(){
49 var obj=document.getElementById(‘ceshi‘)
50 obj.onclick=function(){
51 console.log(‘123‘);
52 alert(‘我一直在寻找找到了你便找到了整个世界‘)
53 }
54 }
55 </script>
56 </head>
57 <body>
58 <div class="box" id="ceshi"></div>
59 <div class="div1">
60 <div class="div2">
61 </div>
62 </div>
63 </body>
64 </html>
原文地址：https://www.cnblogs.com/dhnblog/p/12347127.html
时间： 2024-11-08 16:31:31