css 利用flex居中对齐 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             
 8             .box1{
 9                 width: 800px;
10                 height: 500px;
11                 border: 4px red solid;
12                 
13                 /* 设置弹性容器 */
14                 display: flex;
15                 /* 设置主轴居中 */
16                 justify-content: center;
17                 /* 设置侧轴居中 */
18                 align-items: center;
19             }
20             
21             .box2{
22                 
23                 background-color: #bfa;
24             }
25             
26         </style>
27     </head>
28     <body>
29         
30         <div class="box1">
31             <div class="box2">aaaaaaaaa</div>
32         </div>
33         
34     </body>
35 </html>

 

 

内容，只需要父元素设置

/* 设置弹性容器 */
display: flex;
/* 设置主轴居中 */
justify-content: center;
/* 设置侧轴居中 */
align-items: center;

posted @ 2020-04-14 12:38  全情海洋  阅读(5417)  评论(0)  编辑  收藏  举报