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

第一种方法

 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>

猜你喜欢

转载自www.cnblogs.com/daidechong/p/11308162.html
今日推荐