首页 > 代码库 > 让div盒子相对父盒子垂直居中的几种方法
让div盒子相对父盒子垂直居中的几种方法
1 <html> 2 <head lang="en"> 3 <meta charset="UTF-8"> 4 <title></title> 5 </head> 6 <style> 7 8 #one{ 9 width: 400px; 10 height: 400px; 11 border: 1px solid #000; 12 position: relative; 13 } 14 #two{ 15 width: 200px; 16 height: 200px; 17 background-color: red; 18 position: absolute; 19 top: 50%; 20 left: 50%; 21 margin-left: -100px; 22 margin-top: -100px; 23 24 } 25 </style> 26 <body> 27 <div id="one"> 28 <div id="two"></div> 29 </div> 30 </body> 31 </html>
1 <html> 2 <head lang="en"> 3 <meta charset="UTF-8"> 4 <title></title> 5 </head> 6 <style> 7 #one{ 8 width: 400px; 9 height: 400px; 10 border: 1px solid #000; 11 position: relative; 12 } 13 14 #two{ 15 width: 200px; 16 height: 200px; 17 background-color: red; 18 position: absolute; 19 margin: auto; 20 top: 0; 21 left: 0; 22 right: 0; 23 bottom: 0; 24 } 25 img { 26 display:table-cell; 27 text-align:center; 28 vertical-align:middle; 29 } 30 </style> 31 <body> 32 <div id="one"> 33 <div id="two"></div> 34 <img src="" alt=""/> 35 </div> 36 </body> 37 </html>
让div盒子相对父盒子垂直居中的几种方法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。