css使用flex居中对齐参考代码

terry 2年前 (2023-09-27) 阅读数 64 #数据结构与算法

 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>