css 利用flex居中对齐

本文转载自查看原文 2020-04-14 12:38 3847 CSS

 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;

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 利用CSS实现居中对齐【css】居中对齐方法 flex 居中并两端对齐 CSS居中对齐终极指南 CSS——flex 垂直居中图片与文字居中对齐css CSS - flex使行内元素快速对齐 display:flex 元素垂直居中，有间距，右对齐利用flex布局布置元素居中 flex 垂直居中、两列对齐、自适应宽