absoulue与relative配合定位盒子居中问题

如何通过absoulue与relative配合把一个盒子或者是把2个div块同时放到页面中央部分？定位完成后为什么又需要margin-left与margin-top各往回走50%的长度，别忘记用z-index定位高度，请看下面代码展示:

 <!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>

巴特西

absoulue与relative配合定位盒子居中问题

最新文章

热门文章