absoulue与relative配合定位盒子居中问题
Posted dhnblog
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了absoulue与relative配合定位盒子居中问题相关的知识，希望对你有一定的参考价值。
如何通过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>
以上是关于absoulue与relative配合定位盒子居中问题的主要内容，如果未能解决你的问题，请参考以下文章