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>
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20838.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20838.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20838.html
内容，只需要父元素设置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20838.html
/* 设置弹性容器 */
display: flex;
/* 设置主轴居中 */
justify-content: center;
/* 设置侧轴居中 */
align-items: center;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20838.html
以上就是css 利用flex居中对齐的全部内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20838.html