1.通过flex布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css垂直水平居中</title> 6 <style> 7 html, body { 8 margin: 0; 9 padding: 0; 10 } 11 .main { 12 height: 100vh; 13 display: flex; 14 justify-content: center; 15 align-items: center; 16 } 17 .content { 18 width: 300px; 19 height: 300px; 20 background: rgb(10, 75, 136); 21 } 22 </style> 23 </head> 24 <body> 25 <div class="main"> 26 <div class="content"></div> 27 </div> 28 </body> 29 </html>
2.transferm+margin
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css垂直水平居中</title> 6 <style> 7 html, body { 8 margin: 0; 9 padding: 0; 10 height: 100%; 11 } 12 .content { 13 width: 300px; 14 height: 300px; 15 background: rgb(10, 75, 136); 16 margin: 0 auto; 17 position: relative; 18 top: 50%; 19 transform: translateY(-50%); 20 } 21 </style> 22 </head> 23 <body> 24 <div class="content"></div> 25 </body> 26 </html>
原文：https://www.cnblogs.com/lss0322/p/12826297.html