子盒子在腹黑子垂直居中

我们有四种方式实现子盒子在父盒子上面的垂直居中 

我们有四种方式实现子盒子在父盒子上面的垂直居中 

我们有四种方式实现子盒子在父盒子上面的垂直居中 

===============1
.fater {
定位

​ position: relative;

​ width: 500px;

​ height: 500px;

​ background-color: red;

​ }

​ .son {

​ position: absolute;

​ left: 50%;

​ top: 50%;

​ margin-top: -150px;

​ margin-left: -150px; //相对于子盒子宽度高度的负一半

​ width: 300px;

​ height: 300px;

​ background-color: aqua;

​ }

==========================2
margin auto

.fater {
position: relative;
width: 500px;
height: 500px;
background-color: red;
}

.son {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

width: 300px;
height: 300px;
background-color: aqua;
}
===============3transform 效果
.fater {
position: relative;
width: 500px;
height: 500px;
background-color: red;
}

.son {
position: absolute;
/* top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto; */
left: 50%;
top: 50%;
transform: translate(-50%,-50%); 又走回来

width: 300px;
height: 300px;
background-color: aqua;
}

=======4
.box {
width: 200px;
height: 250px;
background-color: pink;
/* 添加iflex佈局 */

display: flex;

/*y */
/* 添加側軸居中 */
align-items: center;
/* 添加主轴居中 */
justify-content: center;
}

.box div {
width: 50px;
height: 50px;
background-color: red;

}

  1 ===============1  
  2 .fater {
  3       定位
  4 
  5 ​      position: relative;
  6 
  7 ​      width: 500px;
  8 
  9 ​      height: 500px;
 10 
 11 ​      background-color: red;
 12 
 13 ​    }
 14 
 15 
 16 
 17 ​    .son {
 18 
 19 ​      position: absolute;
 20 
 21 ​      left: 50%;
 22 
 23 ​      top: 50%;
 24 
 25 ​      margin-top: -150px;
 26 
 27 ​      margin-left: -150px; //相对于子盒子宽度高度的负一半
 28 
 29 ​      width: 300px;
 30 
 31 ​      height: 300px;
 32 
 33 ​      background-color: aqua;
 34 
 35 ​    }
 36 
 37 ==========================2
 38     margin auto
 39     
 40      .fater {
 41             position: relative;
 42             width: 500px;
 43             height: 500px;
 44             background-color: red;
 45         }
 46 
 47         .son {
 48             position: absolute;
 49             top: 0;
 50             left: 0;
 51             right: 0;
 52             bottom: 0;
 53             margin: auto;
 54 
 55             width: 300px;
 56             height: 300px;
 57             background-color: aqua;
 58         }
 59     ===============3transform 效果
 60      .fater {
 61             position: relative;
 62             width: 500px;
 63             height: 500px;
 64             background-color: red;
 65         }
 66 
 67         .son {
 68             position: absolute;
 69             /* top: 0;
 70             left: 0;
 71             right: 0;
 72             bottom: 0;
 73             margin: auto; */
 74             left: 50%;
 75             top: 50%;
 76             transform: translate(-50%,-50%); 又走回来
 77 
 78             width: 300px;
 79             height: 300px;
 80             background-color: aqua;
 81         }
 82 
 83 =======4
 84 .box {
 85             width: 200px;
 86             height: 250px;
 87             background-color: pink;
 88             /* 添加iflex佈局 */
 89 
 90             display: flex;
 91 
 92             /*y */
 93             /* 添加側軸居中 */
 94             align-items: center;
 95             /* 添加主轴居中 */
 96             justify-content: center;
 97         }
 98 
 99         .box div {
100             width: 50px;
101             height: 50px;
102             background-color: red;
103 
104         }