div宽高不确定，在父元素div中居中。

Posted 2022-06-15 daidechong

第一种方法

 1 <div class="parent">
 2     <div class="child"></div>
 3 </div>
 4 
 5 <style>
 6     .parent 
 7         display: flex;
 8         width: 100%;
 9         height: 300px;
10         background: #cecece;
11         align-items: center; /* 垂直居中 */
12         justify-content: center; /* 水平居中 */
13         
14     .child 
15         background: #000;
16         width: 200px;
17         height: 100px;
18     
19 </style>

第二种方法

 1 <div class="x1">
 2     <div class="x2">
 3     </div>
 4 </div>
 5 
 6 <style>
 7     .x1 
 8         width: 1000px;
 9         height: 1000px;
10         position: relative;
11         background: #000;
12     
13     .x2 
14         width: 20px;
15         height: 20px;
16         margin: auto;
17         top: 0;
18         left: 0;
19         right: 0;
20         bottom: 0;
21         position: absolute;
22         background: #fff;
23     
24 </style>