拓展2-父盒子内,实现子盒子水平、垂直居中

方法:

1、利用盒模型实现

子元素 margin: 0 auto;  === 实现水平居中
子元素 margin-top: calc((父元素的高度 - 子元素的高度) / 2);  
                       === 实现垂直居中但是 会出现外边距的传递问题 
                       === 父元素 /* border: 1px solid black; */ 或 overflow: hidden;

2、利用盒模型实现

子元素 margin: 0 auto;  
父元素 padding-top:calc((父元素的高度 - 子元素的高度) / 2); === 父元素 盒子的大小会被撑大，
                        === 父元素添加 box-sizing: border-box;

3、利用定位实现

子绝父相
          子元素  position: absolute;
          父元素  position: relative;
          子元素  left: calc((父元素的宽度 - 子元素的宽度) / 2); 
                 top:  calc((父元素的高度 - 子元素的高度) / 2);

4、定位 + 盒模型 ==== 不需要知道父元素以及子元素的宽高值

子绝父相
         子元素  position: absolute;
         父元素  position: relative;
         子元素  left: 50%; top: 50%;  
            === 此时的50% 参考系是 其绝对定位的参考系 --- 即父元素（开了相对定位）
            === 偏移量过大  (-50% 代表自身 宽度 / 高度 的一半)
                margin-left: -50%; margin-top: -50%; === 反向移动 偏移量过大的那一部分值;

5、定位 + 歪门邪道 === 父子元素都不需要知道  ---  没道理，记住就行

子绝父相    
          子元素  position: absolute;
          父元素  position: relative;
​
          子元素       top: 0; bottom: 0; right: 0; left: 0;
          子元素       margin: auto;
​

6、弹性盒 ⭐⭐⭐

 1、多个子元素时 --- 单行: ⭐

 父元素  开启弹性盒            dispaly: flex;
        主轴上居中            justify-content:space-center;
        侧轴上居中            align-items:center;

 2、仅有唯一子元素时:

    父元素 开启弹性盒       dispaly: flex;

    子元素                          margin: auto; ​