css实现垂直水平居中

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>

 

posted @ 2020-05-04 13:38  进击的木头ya  阅读(132)  评论(0)    收藏  举报