1.代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 12 div{ 13 /* 100px; 14 height: 100px; */ 15 background-color: #bfa; 16 position: absolute; 17 left: 50%; 18 top: 50%; 19 transform: translateX(-50%) translateY(-50%); 20 } 21 </style> 22 </head> 23 <body> 24 <div>dgjhio</div> 25 </body> 26 </html>
2.图片
讲解
1.不论对设置了宽高和没有设置宽高的快元素，而且已经开启了定位，相对包含块元素定位，设置left: 50%;top:50%; 然后利用translateX(-50%) translateY(-50%); 移动自身的宽高各50%，
则该元素位于网页正中央。